Image behind text

css, css-position, html

Solution

This could be easily done with some basic positioning added

DEMO jsFiddle

div {
    position: relative;
}
h1 {
    display: inline;
}
img {
    position:absolute;
    width:100%;
    max-width: 100%;
}

Problem

I want to display an image behind an H1 tag, I also want the image width to stretch to the same width as the text. My code: ``` <div style="display: inline;"> <img src="http://img585.imageshack.us/img585/3989/m744.png" width="100%" height="68" /> <h1 style="position: absolute; top: 0px;">Variable length text</h1> </div> ``` JSFiddle: http://jsfiddle.net/Aykng/ Current Appearance: Desired Appearance: The image width should either stretch or shrink to fill the div, how can I achieve this? I want it to be compatible with IE 7+, otherwise I would just use `background-image` and `background-size`.

Original source