html - How can I resize a background-image to fit my element (without set width) in CSS 2? -


my problem have remain compliant ie 8, no css3 answers do.

i know can use background-image property, can't use background-size property, css3 only.

i know can resize image , apply it, however, don't know element's size (i don't mind setting height "px" value, use percentages width, body element [nobody likes horizontal scroll-bar!]).

i have center text on background-image, tried inserting <img> tag , putting text in span element position: absolute; doubt using left , top properties kind-of "micromanage" positioning prove same in browsers, screen sizes, , screen resolutions (please, correct me, if i'm wrong, public site, , has same everybody). having been said, not opposed using approach if can assured using positioning same, regardless of user's personal browser, screen, or resolution choices.

is there way handle without relying solely on css3?

i don't think there reason post markup or css, let me know if , i'll happy to.

just clarify: need whole image "fit" in element , not concerned aspect ratio.

you can quite simply:

html:

<div class="holder">     <img src="http://www.lorempixel.com/400/200/" />     <div class="text">testing text</div> </div> 

css:

.holder {position:relative; width:100%; overflow:hidden;} //this has overflow hidden treats image background , hides .holder img {position:absolute; left:0; top:0; width:100%; z-index:1;} .holder .text {position:relative; z-index:2; text-align:center;} //this positioned relative div grows size of text 

http://jsfiddle.net/uanfm/2/


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -