[CSS] two images as background (auto resized)

[Chris]

No CSS3 please, at the very least IE7+ compatible (wouldn't mind IE6 compatibility through, at least so it is not broken on older browsers, might look uglier).


We are rendering a box. There is red header (fixed size) below is blue content (resizable) with text, it resizes itself when there is more text. So far so good.

Now, how to make that the text appear partially on the red header (begins higher)? So it starts in the middle of red (fixed size image) and go down to blue (resizable image), when needed it will resize the blue.

[JGadrow]

Not sure if I have the requirements for this right. But sounds like if you have a floated <div> inside of the <div class="red"> and have a clearing element inside of <div class="blue"> that would take care of it. Place a top-margin on the floated div to place it 1/2 of the way down the red div and it meets your requirements.

[Chris]

Ugh... I haven't used divs for a long time so I doubt I understood properly what you said Anyway, this below does not work.

Code: [Select]

<div style="background-image:URL('a.png'); height:30;">
</div>

<div style="background-image:URL('b.png'); top-margin=15;">
text, text, text<br>
text, text, text<br>
text, text, text<br>
</div>

[Marek]

This is how I would solve it. If I understood correctly, you need the text to start on the top part (red, 30px in this example) and if it needs more room than the height of the top, it overflows with the blue background.

Code: [Select]

<div style="background-color: blue;">
<div style=" background-color: red; height: 30px;"></div>

<div style="margin-top: -30px">
text <br/>
text <br/>
text <br/>
text <br/>
</div>

</div>

If you use a bg image for the blue part, you need to offset the bg by 30px from the top. This is because the red div is in front of the red one; it hides the top 30px of the blue div. This is accomplished with: background-position: center 30px;

[Chris]

Yes, that's exactly what I wanted. Thanks!

Does not work perfectly with IE6 (especially if you minimize and restore the browser, backgrounds get messed up). Anyone knows if this work under IE7 and some crappy mobile browsers (like iPhone)?


"background-position: center 30px;" can not be used, because it works only if no-repeat, which beats the purpose.
http://www.w3schools.com/css/tryit.asp?filename=trycss_background-position
Is there another way (this is needed if we want red image to have some transparent parts)?

[JGadrow]

You almost got what I was talking about Chris:

Code: [Select]

<div style="background-image:url('a.png'); height:30;">
</div>

<div style="background-image:url('b.png');">
    <div style="float:left;margin-top:-15px;">
        text, text, text<br />
        text, text, text<br />
        text, text, text<br />
    </div>
    <div style="clear:left;"></div>
</div>
Might be a little ugly in IE6 because it handles floats oddly but should be ok in just about everything else. If it doesn't work in IE7, probably need to trigger hasLayout on the floated div.