html - Image behind text -


i want display image behind h1 tag, want image width stretch same width 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 fill div, how can achieve this?

i want compatible ie 7+, otherwise use background-image , background-size.

this done basic positioning added

demo jsfiddle

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

Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -