How do I overlay a banner image with CSS?
Posted on 2011-04-18
I have a fluid website theme I am trying to modify with a banner. (Existing code below.) I need a repeating background image which repeats all the way across the banner area. This is working with the code below. I now need to add an overlaid "main" image of the same height. The end result should look like the centered image with left and right background fill no matter what screen resolution is being used. Main centered image is 902px wide. I realize this is easily done with absolute positioning and disregarding screen resolution...but I want to accomodate as many resolutions as possible. I have been able to accomplish the centering of the main image without any background fill, but it leaves solid white blocks on the left & right.
background: #FFF url(images/background_fill.png) repeat-x;
border-top: 1px solid #7D88A4;
border-bottom: 1px solid #7D88A4;
The "overlay" method *seems* like it would be the easiest...but I am open to other methods.
Alternatively, I can visualize using the background_fill.png for x pixels, starting the main centered image and then finishing out with more background_fill.png.