How Can I Resize A Background-image To Fit My Element (without Set Width) In Css 2?

My problem is that I have to remain compliant with IE 8, so no CSS3 only answers will do. I know that I can use the background-image property, but I can't use background-size prope

Solution 1:

You can do this quite simply:

html:

<divclass="holder"><imgsrc="http://www.lorempixel.com/400/200/" /><divclass="text">Testing text</div></div>

css:

.holder {position:relative; width:100%; overflow:hidden;} //this has overflow hidden so it treats the image like a background and hides any extra.holderimg {position:absolute; left:0; top:0; width:100%; z-index:1;}
.holder.text {position:relative; z-index:2; text-align:center;} //this is positioned relative so the div grows to the size of the text

http://jsfiddle.net/UANFm/2/

Solution 2:

Very tough without javascript.

You might be able to add it as a normal image, set the postition to relative and z-index it under all the other content, then set width 100%. But this is still a bit of a hackish way and one that I haven't tested.

Edit try this: http://jsfiddle.net/xTgCY/

<divclass="wrapper"><imgsrc="http://t2.gstatic.com/images?q=tbn:ANd9GcSaATzueHSd2rQXCWUQXFXc1sFAx3tNXBj-px5bU64D4ji5rmF6cw"><divclass="content">aihadfuighiaghdfaoisyhifo[iayhdfoiahdfiosadf</div></div>.wrapper {
    width:300px;position:relative;
}
.wrapperimg {
    position:relative;z-index:-5;width:100%;
}
.content {
   position:absolute;z-index:0;top:0;left:0;width:100%;
}