CSS Background-image + Span image entire size of DIV

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.

我有一个DIV，其中包含个人资料信息，DIV的大小将因人而异。我想在DIV下运行背景图像，并希望根据配置文件的长度调整大小。

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?

有没有办法在DIV后面运行一个大小会改变的图像，并且图像会根据DIV的大小调整大小？

thx

谢谢

4 个解决方案

#1

Background images cannot be resized using CSS2.

无法使用CSS2调整背景图像的大小。

You can do it using CSS3 though.

你可以使用CSS3来做到这一点。

#2

#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.

这里有一个尝试：http：//jsfiddle.net/rqVU6/调整宽度或高度来查看结果，当你在代码中你将摆脱宽度和高度属性我猜，因为你有一个非固定的比例div 。这里有一个内容和宽度为auto的示例：http：//jsfiddle.net/rqVU6/1/我希望这能帮到你。

#3

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,

这很好用，没有新的显示行：阻止一些如何制作问题，

#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.

这应该返回DIV的“真实”大小（即使它被剪裁）。然后，您可以使用这些值来调整图像大小。

#1