Results 1 to 8 of 8

Thread: Problem with repeated background image

  1. #1
    Join Date
    May 2005
    Location
    Gold River, British Columbia Canada
    Posts
    29
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default Problem with repeated background image

    I was wondering if someone could give me some help with this problem I'm having (see image). I've tried changing widths, repeats, and even making the banner wider but still I get the logo repeating on the right:



    Here's the code I've been trying:
    Code:
    .banner, .search_box {
    	height: 80px;
    	background-image: url(vifeheader4.gif);
    	background-repeat: repeat-x;
    	font-size: 20px;
    	font-weight: bold;
    	color: #FFFFFF;
    	text-align: center;
    	padding-top: 20px;
    }
    .banner {
    	width: 530px;
    	padding-left: 20px;
    	float: left;
    	text-align: left;
    }
    .banner a {
    	color: #000000;
    	padding-left: 220px;
    }
    Last edited by nootkan; 04-09-2009 at 05:57 AM. Reason: resolved

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    background-image: url(vifeheader4.gif) no-repeat;

  3. #3
    Join Date
    May 2005
    Location
    Gold River, British Columbia Canada
    Posts
    29
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Thanks but I tried that also and it just removes the background image altogether.




  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    That's because background-image is for the image only, not for specifying the repeat. This is the correct syntax:
    Code:
    background-repeat: no-repeat;
    Also, if you don't want the background behind the search box, you will have to declare it separately for the banner:
    Code:
    .banner, .search_box {
    	height: 80px;
    	font-size: 20px;
    	font-weight: bold;
    	color: #FFFFFF;
    	text-align: center;
    	padding-top: 20px;
    }
    .banner {
    	width: 530px;
    	padding-left: 20px;
    	float: left;
    	text-align: left;
    	background-image: url(vifeheader4.gif);
    	background-repeat: no-repeat;
    }
    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  5. #5
    Join Date
    May 2005
    Location
    Gold River, British Columbia Canada
    Posts
    29
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Thanks for that, but I'd already tried that also and it didn't work either.

  6. #6
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Tried what? Didn't work how? If you want us to be able to help you, please post a link to your site or attach all your code and be more specific about the problem. Tell us where you want the background to appear and where you don't want it to appear.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  7. #7
    Join Date
    May 2005
    Location
    Gold River, British Columbia Canada
    Posts
    29
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Sorry snookerman, I didn't see your bottom code changes. I was just looking at the top one. I got it to work by making the changes you suggest in the bottom code (.banner) and then added background-image: url(vifeheader5.gif); in the (.banner, .search_box) code. Thanks for your input, greatly appreciated.

  8. #8
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    You're welcome, glad to help!
    You can go to your first post in this thread, click then click Go Advanced and add the Resolved prefix to the thread title.
    This will let other users know the problem has been solved.

    Good luck with your site!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •