Problem with repeated background image

[nootkan]

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:

http://www.bassonhook.com/screenhunter.gif

Here's the code I've been trying:

.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;
}

[bluewalrus]

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

[nootkan]

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

http://www.bassonhook.com/screenhunter2.gif

http://www.bassonhook.com/vifeheader4.gif

[Snookerman]

That's because background-image is for the image only, not for specifying the repeat. This is the correct syntax:

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:

.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!

[nootkan]

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

[Snookerman]

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.

[nootkan]

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.

[Snookerman]

You're welcome, glad to help!
You can go to your first post in this thread, click http://www.dynamicdrive.com/forums/images/buttons/edit.gif 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!