background over a background?

[brentnicholas]

Howdy all -

So maybe I'm going about this all screwy like...

First my goal: I have a header DIV with a back ground img no-repeat (1200x80), but on some monitors that's not long enough. I could make the image 10000 width, but that's not good?? Or is it?

So what I did was make another DIV wrap around the header div and set it's background to a repeating graphic that would continue on.

It doesn't work though. So is there some easier way to do this? or have I done something wrong. or do I just make the first graphic reallllllllly long?

EX:

<style>
#header_bg {
background:#2C55A7 url(../images/RoadMap1_repeat.jpg) repeat-x right;
position:absolute;
margin:0;
top:0;
right:0;
}

#header {
background:#2C55A7 url(../images/RoadMap1.jpg) no-repeat;
position:absolute;
display:block;
margin:0;
top:0;
right:0;
width:100%;
height:5.2em;
z-index:5;
}
</style>

<div id="header_bg">
<div id="header">
</div>
</div>


Thanks for your time -

BN

[Veronica]

Is this the effect you're looking for? It uses the repeating image for a background, then positions the non-repeating image, with the text over it.



<style>
div#header {
background:#2C55A7 url(../images/RoadMap1_repeat.jpg);
background-repeat: repeat;
}
.picture {
position: relative;
height: auto;
width: auto;
left: 25px;
top: 0;
}
div#text {
position: relative;
height: auto;
width: auto;
left: 25px;
top: -40;
}
</style>
<div id="test"><img class="picture" src="../images/RoadMap1.jpg"><div id="text">Any text you want to put in the header</div></div>

[brentnicholas]

Hey Veronica

Thanks for the reply. I played around with you idea for a while. It seems that it should work, but for whatever reason it didn't.

I'm still pretty weak on my css, so that might have a bit to do with it. It' also maybe that it's Friday and 15min to quiting time... ;)

I'll give it another shot on Monday.

Thanks though.

BN