CODEWITHSUNDEEP
htmlcsscss-position
Drahcir
Drahcir

Reputation: 11972

Image behind text

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:

Current Appearance

Desired 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.

Upvotes: 2

Views: 46144

Answers (5)

Marc Audet
Marc Audet

Reputation: 46785

Here is another way of doing it without using display: inline-block and a IE7 hack:

<div class="parent">
    <img src="http://img585.imageshack.us/img585/3989/m744.png" 
         width="100%" height="68" />
    <h1>Variable length text</h1>
</div>

with the CSS:

.parent {
    display: inline;
    position: relative;
}
.parent img {
    position: absolute;
    top: 0;
    left: 0;
}
.parent h1 {
    display: inline;
    position: relative; /* this makes sure the h1 is in 
                           front of img in stacking order */
    border: 1px dotted lightgray;
    padding: 0 10px; /* optional, tweak left/right as needed */
    vertical-align: top;
    line-height: 68px;
}

Demo fiddle: http://jsfiddle.net/audetwebdesign/BfMDJ/

This is identical to an earlier solution by Vector except in how the height of the image is handled.

I chose to set the line height for h1 to match that of the background image (68px in this example), and then apply vertical-align: top. This makes it easier to vertically align the text if you so desire.

Potential Issue

If you set the image width to 100% and set the height, then the image will get distorted. You would need to specify something about the background image and how you want the text to be centered vertically if you want a more robust answer.

Upvotes: 1

Kevin Lynch
Kevin Lynch

Reputation: 24703

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%;
}

Upvotes: 5

Vikas Singhal
Vikas Singhal

Reputation: 20

You can use the following code. It will work across browsers including IE 7. 

<div style="display: inline-block;background: url('http://img585.imageshack.us/img585/3989/m744.png') repeat; *display:inline;*zoom:1;">
    <h1>Variable length text</h1>
</div>

Upvotes: 0

x4rf41
x4rf41

Reputation: 5337

this seems to work (also in IE8):

the div will be as big as the <h1> (the text is not centered now because of its margins, you have to changed those to make it fit!

<div style="display: inline-block;position:relative;">
    <h1 style="position:relative;z-index:2;top:0px;">Variable length text</h1>
    <img src="http://img585.imageshack.us/img585/3989/m744.png" style="position:absolute;top:0px;left:0px;width:100%;height:68px;z-index:1" />
</div>

http://jsfiddle.net/Aykng/9/

Upvotes: 3

Math chiller
Math chiller

Reputation: 4167

use:

display: inline-block;

on the div css.

and place the image as the div's "background-image".

Upvotes: 0

Related Questions