Question

我试图将图像设置为我的django应用程序的背景图像。但是当我设置它时，它会显示为平铺图像。即，在没有实际拉伸图像的情况下，相同的图像被平铺并显示4次。有人可以告诉我如何拉伸图像并将其设置为背景图像。我会在这里粘贴我的代码。我确信有一些属性必须设置这个，这是我在google搜索中找不到的。

<body bgcolor=" #408080" background="/static/paper.jpg" background-size: 100%; >

Answer 1

不要在body标签上使用背景图片，而应在主体正下方添加图像标签，将位置设置为绝对值，将z-index设置为低，然后将width = 100％，height = 100％。

Answer 2

您需要将其应用为样式，而不是属性。如果您的浏览器支持CSS 3，那将会有效：

style="background: url(/static/paper.jpg); background-size: 100%;"

一些背景信息：

Answer 3

简而言之：不，你不能用html / css1 / css2来拉伸背景图片，你只能选择使用css3（巫婆没有被所有浏览器完全支持）或使用背景附件和background-repeat css porperties来实现另一种结果......

另一个选择是使用img标签作为背景使用z-index css proprety然而你会发现它很难让它在所有主流浏览器中正常工作。

Answer 4

您可以将图片放在<img>标记中，并将z-index设为-1，这样就可以将背景拉伸到100％宽度和高度，因此它就像背景一样，并且落后于其他所有内容。这适用于所有浏览器。

<img src="..." />

img{
    position:absolute;
    z-index:-1;
    width:100%;
    height:100%;
}

如果您不想打破纵横比，只需设置宽度或高度，而不是两者。

检查http://jsfiddle.net/UXBRM/1/

处的工作示例

Answer 5

用油漆编辑图像。点击图片并根据需要保存图片。

这肯定适用于任何HTML。

Answer 6

正如其他人所说，你应该总是尝试在你的css中定义尽可能多的属性，而不是直接在你拥有图像本身路径的地方。这就是它如何回归并被弃用，以及它可能无法正常工作的原因。

使用img src =“poefwpf.png”，也许可以轻松编辑你的css：

#imgex img {
    width: 100%; 
    height: 100%; 
    (maybe also z-index:-1;)
}