Repeat Background Image

[vlastanovak]

Hello,

I would like to make some small changes to the header section of my forums - it looks perfectly fine on most resolutions, but on larger ones (such as 1900 wide) the main banner (showcase-bg.jpg) repeats.

So basically what I need to do is, stop the main banner image (showcase-bg.jpg) from repeating and instead put another horizontally repeating image (say 20 pixels wide) underneath this main banner (otherwise it's just black either side of the main banner.

Problem is, I suck at coding and was hoping someone on here might be able to lend a hand!



Site: http://ausnzclancentral.com/forums

And here's the CSS for that part of my site;

a, #main-content ul li a {color: #ac3395;}

body {background: #2B2D53;}

#pathway {color: #ac3395;}

#pathway a {color: #999;}

#page-bg {background: #FFFFFF;}

#copyright {color: #999;}

#showcase {background: #000000;}

#showcase-bottom-bg {background: url("http://ausnzclancentral.com/ladders/themes/vbStyle/images/style6/showcase-bg.jpg") 50% 50% repeat-x;}

#footer-top {background: #fff url(../images/style6/footer-top.png) 20% 5px repeat-x;}

#footer-top2 {background: url(../images/style6/footer-top2.png) 40% 100% no-repeat;}

#footer {background: url(../images/style6/footer-bg.png) 0 0 repeat-x;}

#footer-bar {background: url(../images/style6/footer-bar.png) 50% 0 no-repeat;}

#footer-highlight {background: url(../images/style1/footer-highlight.png) 50% 6px no-repeat;}

img#rocket {background: url(../images/style6/rocket.png) 0 0 no-repeat;}

.xhtml-button {background: url(../images/style6/xhtml.png) 0 0 no-repeat;}

.css-button {background: url(../images/style6/css.png) 0 0 no-repeat;}

Thanks in advance.

[eJM]

Change this:

#showcase-bottom-bg {background: url("http://ausnzclancentral.com/ladders/themes/vbStyle/images/style6/showcase-bg.jpg") 50% 50% repeat-x;}

to this:

#showcase-bottom-bg {background: #000 url('http://ausnzclancentral.com/ladders/themes/vbStyle/images/style6/showcase-bg.jpg') 50% 50% no-repeat; color: #fff;}

You should always have a background color and a font color when you use a background image. You were telling the image to repeat - repeat-x means to repeat horizontally. Read more about it here: http://www.w3schools.com/css/css_background.asp

Jim

[vlastanovak]

OK brilliant, so that stops the main banner in the middle from repeating.

Now, how would I go about putting a 20 pixel wide image underneath that main banner and have it repeat horizontally across the page?

Thanks for your help. Your blood is worth bottling.

[eJM]

Now, how would I go about putting a 20 pixel wide image underneath that main banner and have it repeat horizontally across the page?

I wanted to look at the page again before suggesting anything, but got an internal server error.

Thanks for your help. Your blood is worth bottling.

Hmmm, I think I'll leave it where it is for now.

Jim

[vlastanovak]

Thanks, it should be alright now if you want to look again. Lol.

:P

[eJM]

You have plenty of room for a 20px wide image. I don't understand what you want though because images also have a height.

You also have other issues I don't understand. There's a huge cluster of DIVs that don't seem to be necessary except to put several images together. Why didn't the graphics designer put those images together into one image? You also have images called for backgrounds in some of those DIVs, but the images can't be found.

Anyway, why isn't the designer in on this?

Jim