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