Question

在我的网站中，在特定的表格中，我必须插入图像作为背景。我这样做但图像看起来像双图像，因为图像小于单元格宽度和高度，它会重叠。

在背景图像单元格中，我使用no-repeat来结束相同图像的重复显示，但它不起作用。我正在使用django框架中的html设计网页。

模板是

<td background="{{ STATIC_URL }}images/sample.JPG" no-repeat;>

我是否知道如何取消在表格单元格中重复显示相同背景图像。

由于

Answer 1

看看我是怎么做到的：在模板中，我输入以下行：

<body id="bg" style="background-image: url('{% static "images/33.jpg"%}')";>

在css中：

#bg{
    background-size: 1800px 900px;
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
}

结果我获得了固定的背景和屏幕的比例。

Answer 2

'no-repeat'不是有效的html属性。为什么不使用样式属性或正确的css包含文件？

<td style="background: url('{{ STATIC_URL }}images/sample.JPG') no-repeat;">

Answer 3

尝试如下......它会帮助你...

no repeats the image background它还Stretch the image to Table Cell ..

<强> CSS：

<style>
.tdStyle
{
background-image:url('{{ STATIC_URL }}images/sample.JPG');
background-repeat:no-repeat;
background-size:100%;
}
</style>

要支持旧浏览器，您可以将以下行添加到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：

<td class="tdStyle">

Answer 4

顺便说一句，我们创建了一个reusable app，允许通过管理网站更改背景图片。

Answer 5

在CSS中，您将执行以下操作：

#.bg-image {
      
      background-size: 100%;
  
      background-position: center center;
  
      background-repeat: no-repeat; 
}

Answer 6

.bgded{
      background-image: url( "{% static 'images/ur.jpg' %}");
  }

记住要通过添加来加载静态页面

{% load static %}

在HTML页面顶部。

Answer 7

这对我有用。如果我们使用带有 background-image:url 的内联样式，我们必须手动创建路径。

<body id="bg" style="background-image: url('../images/33.jpg')";>

如何在django中为模板应用背景图像

7 个答案: