CSS Background-image + Span image entire size of DIV

Question

I have a DIV that holds profile information and the size of the DIV will diff per person. I want to run a background image down the DIV and want it to resize depending on the length of the profile.

I've tried the following:

 <div id="profileThemeWrapper"></div>

CSS

 div#profileThemeWrapper {
    background: url(../images/online-dating-main/themes/heart-theme.jpg) no-repeat;
 }

this doesn't help with resizing at all - it just displays the image as it is.

I've also tried with the tag and find that when i use this the image doesn't run under the text.

Is there a way to run an image behind a DIV thats size will change and have the image resize with the size of the DIV?

thx

Answer 1

#background
{
  width:auto;
  height:auto;
  background: url(/images/special_offer.png);
  background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%; /*  Safari  */
    -khtml-background-size: 100% 100%; /*  Konqueror  */
    -moz-background-size: 100% 100%; /*  Firefox  */
}

here have a try: http://jsfiddle.net/rqVU6/ resize the width or height to see the result, ofcourse in your code you'll get rid of width and height property I guess, cause you have a non fixed scale div. Here you have an example with content inside and width to auto: http://jsfiddle.net/rqVU6/1/ I hope this helped you somehow.

Answer 2

Here I had also fixed, it with inline-block.

.oe_field_legend_star {
 background-image: url(web/static/src/img/icons/star-on.png);
 width: 15px;
 height: 15px;
 display: inline-block;} 

This works superb, with no new line as display:block some how make issue,

Answer 3

Background images cannot be resized using CSS2.

You can do it using CSS3 though.

Answer 4

var target = document.getElementById("profileThemeWrapper");
var wd = target.scrollWidth;
var hd = target.scrollHeight;

This should return the "real" size of the DIV (even if it's clipped). You can then use these values to size up the image.