Html 如何在 django 中为模板应用背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16014910/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to apply background image for an templates in django
提问by user2086641
In my site, in a table of particular I have to insert a image as background. I did that but the image looks like double image as the image is smaller than cell width and height it is getting overlap.
在我的网站中，在一个特定的表格中，我必须插入一个图像作为背景。我这样做了，但图像看起来像双重图像，因为图像小于单元格宽度和高度，它正在重叠。
In background image cell I used no-repeat to end the repeat display of same image, but it is not working. I am designing web page using html in django framework.
在背景图像单元格中，我使用 no-repeat 来结束相同图像的重复显示，但它不起作用。我正在 django 框架中使用 html 设计网页。
template is
模板是
<td background="{{ STATIC_URL }}images/sample.JPG" no-repeat;>
May I know how to cancel the repeat display of same background image in a table cell.
我可以知道如何取消表格单元格中相同背景图像的重复显示。
Thanks
谢谢
采纳答案by Pandian
Try like below... It will help you...
像下面这样尝试......它会帮助你......
It no repeats the image backgroundand it also Stretch the image to Table Cell..
它no repeats the image background和它也Stretch the image to Table Cell..
CSS:
CSS：
<style>
.tdStyle
{
background-image:url('{{ STATIC_URL }}images/sample.JPG');
background-repeat:no-repeat;
background-size:100%;
}
</style>
To Support Old Browsers you can add the below lines to CSS :
要支持旧浏览器，您可以将以下几行添加到 CSS 中：
-moz-background-size: 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100%; /* Opera 9.5 */
-webkit-background-size: 100%; /* Safari 3.0 */
-khtml-background-size: 100%; /* Konqueror 3.5.4 */
-moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */
HTML:
HTML：
<td class="tdStyle">
回答by Ferney Bermeo Ruiz
Look how I did it: In the template I put the following line:
看看我是怎么做的：在模板中，我放置了以下行：
<body id="bg" style="background-image: url('{% static "images/33.jpg"%}')";>
And in the css:
在 css 中：
#bg{
background-size: 1800px 900px;
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
}
As a result I obtained a fixed background and with the proportions of the screen.
结果我得到了一个固定的背景和屏幕的比例。
回答by Hedde van der Heide
'no-repeat'is not a valid html attribute. Why aren't you using the style attribute OR a proper css included file?
'no-repeat'不是有效的 html 属性。为什么不使用 style 属性或适当的 css 包含文件？
<td style="background: url('{{ STATIC_URL }}images/sample.JPG') no-repeat;">
