div and background image to expand with content

[deldalton]

I would like to create a div, that has a background image, containing some text. If the text within the div is expanded then I would like the div and the background image to expand with the content. I'm aware of the "background-size" css property. However, this is only compatible with new browsers and I'm concerned that some end users may attempt to access the website using an older browser (IE6, IE8 etc.). The background image needs to stretch, because it has a "lighting" effect applied to it. If I repeat the image it won't look right, at all, and it would be obvious that the image had been repeated. So, the only way I can think of doing this is by using an <img> element with it's height amended to a percentage (although this isn't working as expected either at the moment as the page looks different in Chrome to IE) and a <p> element that has a relative position so that I can move it's location on top of the image. However, relative positioning then leaves the original space that the <p> element would have taken on the page and increases the gap between the content and the footer, which I don't want either. I hope what I've explained is clear. Can any one provide any suggestions? Many thanks.

[Spunky]

If you simply change the z-index (I believe this requires absolute positioning) then I believe you should be able to get the <p> to go on top of the image without using relative position that creates that original space..

[deldalton]

If you simply change the z-index (I believe this requires absolute positioning) then I believe you should be able to get the <p> to go on top of the image without using relative position that creates that original space..

Thanks, Spunky. That makes sense. How could I, then, make the image, that I'm using as a background, to expand in height with the content moved with absolute positioning? I have a feeling that it's not actually possible and that I would have to use the "background" css property to apply the image as an actual background to the content div. But, as briefly explained in the opening post, I'd then have to use the background-size css property which isn't compatible with all browsers yet. Is there anything else I can do to get this to work? I have seen a few articles about using additional code that recognises when an older browser is being used but I'm unfamiliar with how this works.

[Spunky]

After reading your original post I actually took a minute to think about what you're trying to accomplish. I've never tried to have an image expand with the div like that before, but it is an interesting concept. I know you said changing the width to 100% wasn't working but have you tried it with my idea? If you don't want to use the background CSS property than having it as an image seems like the best work-around. Yes, there is code that detects what browsers people are using, I've never used it before though either. For that matter there are JavaScript solutions as well I'm pretty sure. I don't think you could tell the CSS background property to be used depending on the browser unless you're using JavaScript anyways.

[dsonesuk]

Use position: relative for container, position: absolute; top: 0; left:0; width: 100%; height: 100%; for img element inside of this container. should work.

[deldalton]

After reading your original post I actually took a minute to think about what you're trying to accomplish. I've never tried to have an image expand with the div like that before, but it is an interesting concept. I know you said changing the width to 100% wasn't working but have you tried it with my idea? If you don't want to use the background CSS property than having it as an image seems like the best work-around. Yes, there is code that detects what browsers people are using, I've never used it before though either. For that matter there are JavaScript solutions as well I'm pretty sure. I don't think you could tell the CSS background property to be used depending on the browser unless you're using JavaScript anyways.

Spunky. Thanks for taking some more time to think about my query. I'm not particularly familiar with Java Script yet so I was hoping to come up with a HTML/CSS solution.

Use position: relative for container, position: absolute; top: 0; left:0; width: 100%; height: 100%; for img element inside of this container. should work.

Dsonesuk. I've taken your suggestion on-board. This is what I've (well, you've) come up with and, so far, it seems to be working.

<!DOCTYPE html><html><head><link type="text/css" rel="stylesheet" href="stylesheet.css"/><title>Title</title> </head> <body><div id="container"> <div id="header">   <img src="images/header.png" id="headerBackground"/>  <img src="images/HeaderLogo.png" id="headerlogo" alt="Logo"/>  </div> <div id="contentTop">  <img src="images/contentTop.png" id="contentTopBackground"/>  </div> <div id="contentCenter">  <img src="images/contentCenter.png" id="contentBackground"/>  <p id="content"></p>  </div> <div id="contentBottom">  <img src="images/contentBottom.png" id="contentBottomBackground"/>  </div> <div id="footer">  <img src="images/footer.png" id="footerBackground"/>  </div></div></body> </html>

html {position: relative;background: url('images/background.png');margin: 0 auto;border: 0;padding: 0;} body {postion: relative;margin: 0 auto;border: 0;padding: 0;} div {postion: relative;margin: 0 auto;border: 0;padding: 0;} img {postion: relative;margin: 0 auto;border: 0;padding: 0;} p {postion: relative;margin: 0 auto;border: 0;padding: 0;} #container {position: relative;width: 100%;min-width: 800px;height: 100%;} #header {position: relative;height: 170px;width: 100%;min-width: 800px;} #headerBackground {position: absolute;height: 170px;width: 100%;min-width: 800px;} #headerlogo {height: 90px;width: 348px;position: absolute;top: 40px;left: 30px;} #contentTop {position: relative;height: 100px;width: 800px;} #contentTopBackground {position: absolute;width: 800px;height: 100px;} #contentCenter {position: relative;width: 800px;height: 100%;min-height: 180px;} #contentBackground {position: absolute;width: 800px;height: 100%;z-index: -1;} #content {color: red;width: 700px;} #contentBottom {postion: relative;height: 100px;width: 800px;} #contentBottomBackground {position: absolute;width: 800px;height: 100px;} #footer {position: relative;height: 120px;width: 100%;min-width: 800px;} #footerBackground {position: absolute;height: 120px;width: 100%;min-width: 800px;}

First of all, I have to point out that I appreciate that I've used the position, margin, border, and padding properties on almost every element. I would have expected this to "cascade" through to the other elements but it didn't so just to make it clear to myself and, hopefully, the browser it's specified everywhere! So, just to clarify, what's now happening is that when I enter text into the p "content" element the "contentCenter" div expands, in height, to accomadate the extra content, and the "contentBackground" img element also expands with the containing "contentCenter" div. Just need to confirm this works in the majority of browsers now. I've only tested it in IE9 so far.

[Spunky]

What dsonesuk said just summarized my original solution before I mentioned JavaScript.

If you simply change the z-index (I believe this requires absolute positioning) then I believe you should be able to get the <p> to go on top of the image without using relative position that creates that original space..

I just hadn't spelled the rest out to you that you need to still make the width 100% just like you did with relative positioning. I was just suggesting using absolute instead of relative. Glad it works. I suggest downloading all major browsers onto your computer so that you can test. I believe there is also a site that will do this for you.

[deldalton]

What dsonesuk said just summarized my original solution before I mentioned JavaScript. I just hadn't spelled the rest out to you that you need to still make the width 100% just like you did with relative positioning. I was just suggesting using absolute instead of relative. Glad it works. I suggest downloading all major browsers onto your computer so that you can test. I believe there is also a site that will do this for you.

Spunky. Yes, you're original solution was the same. Apologies for not crediting your suggestion, too. Thanks so much for the help.