The background image I want to repeat across the header in the background is just a thin vertical graphic with alternating colors meant to create subtle horizontal stripes. But the space it would occupy is sitting between two images in the header (placed with image tags in the markup). So there are 3 divs within the header div.
The first image is the logo absolutely positioned to the left and on the other side is an end cap for the banner which is floated right.
Of course the idea is to have a graphic in between that just looks like horizontal lines and expands to the width of the browser window.
The image wont show up in any browser Ive tried even when testing with 100% heights, etc. in order to pry open the header div. I can get it to appear if I place an image in the markup using the <img> tag, but of course it shoves the divs around. Also these are not content graphics but styling so I don’t want to use them in the markup if possible.
Maybe I should have used an inline list and floated everything left. (?)
Any help out there?
Heres the CSS rules that apply:
#left-banner-logo {
position : absolute;
left : 0;
top : 0;
width : 220px;
height : 80px;
}
#header {
position : absolute;
top : 8px;
left : 8px;
margin-right : auto;
background-color : #6699cc;
width : 98%;
}
#Other-images-expansion-space {
background: url(images/bannerBG.gif) repeat-x;
}
#right-banner-cap {
float : right;
display : inline;
top : 0;
width : 11px;
height : 80px;
}
and heres the markup:
<div id="header"> <!-- Slices (HeaderArt4.psd) -->
<div id="left-banner-logo"><a href="../index.html"><img src="../images/left-banner-logo.gif" width="220" height="80" alt="Mirror Lite banner logo Image" border="0" /></a> </div>
<div id="Other-images-expansion-space"></div>
<div id="right-banner-cap"> <img src="../images/right-banner-cap.gif" width="11" height="80" alt=" Mirror Lite right banner cap" /> </div>
</div>
<!-- End header -->
Is the image definitely in the right place? Remember that the filepath is relative to the CSS file, not the HTML file.
On second thoughts, it looks as though you’ve got a collapsed <div>. You’ve not set a height for it, and there’s no content, so it just shrinks to zero.
Paul O’B,
Thanks for your reply. So here were using a p tag for an image container? Why not I guess. But the repeating image still doesnt show up- just that background color. I guess I should just concede and just put this part of the page in a table. I just really thought this could be done in a banner without a table:
The code above is a fully working demo. Just add images and it will work.
I believe I also gave you a working demo in your other thread using your existing code and told you why it wasn’t working before I fixed it.
There is no problem in doing what you want and tables certainly aren’t needed. It is the most basic of operations and I think you just haven’t managed to get the right ingredients mixed at the same time.
If you want to post another link to the problem I’ll run through it again in case you have changed something in the meantime.
Yes, the fact that it is a basic operation and I’m managing to mess it up is driving me nutty.
I think you just haven’t managed to get the right ingredients mixed at the same time.
I’m sure you’re right about that. I could see no reason why what I was trying to do wouldn’t work. I never dreamed I’d have a problem with that when I set it up. Two years later, I finally get around to putting the background image in to replace the background color-and I’ve become a complete bumbling idiot in the mean time! :headbang:
Heres a question though: Is there a reason why I couldnt use the image tag with an id for the banner-logo instead of the p tag?
Paul O’B. I did find a dot missing in my url. :jester:Thought I had determined that wasnt the issue, but alas it was. Your suggestion was a better solution than I would have had anyway because it allowed for a text-based tagline in the header as well. Thanks again for your help!
