body 上的图像即使指定 "repeat-x" 也不重复

Question

我在我的 HTML 代码中指定了一个 div，然后在样式表中用背景图像、高度、宽度和一个 repeat-x 值定义了 div。不过我的图片没有重复。

如果我在 HTML 文件中指定了一个图像，但它随后与网页上的重复图像重叠，这确实有效。

CSS:

.header {
    height: 120px;
    width: 120px;
    display:block;
    background-image:url(logo.gif);
    background-repeat: repeat-x;
    background-size: contain;
}

HTML:

    <div class="header" id="header">          
        <!--<img src="logo.gif" name="logo" width="181" height="119" 
id="logo"/> -->
    </div>

预期的结果是我的 logo.gif 被重复到 x 轴页面的右侧。实际结果（如上所述）是什么也没有发生。唯一出现的情况是，当我取消注释上面的 HTML 代码然后图像重复时（尽管它是 CSS 图像重复，而不是 HTML 图像）并且有一个 HTML 图像在其顶部，CSS 图像在其下方重复，这看起来很奇怪，因为某些徽标从 HTML 图像中突出。我试图通过注释掉 HTML 图片来解决这个问题，因为希望 CSS 会重复，但是当注释掉 HTML img 标签时，CSS 消失了也是。

Answer 1

要获得您想要的效果，首先 div 的 width 需要比 height 大才能例如，在 x-axis 中查看 重复图像：

CSS:

.header { height: 120px; width: 460px; // <-- this needs to be bigger than height display:block; background-image:url(logo.gif); background-repeat: repeat-x; background-size: contain; }

这是：example

body 上的图像即使指定 "repeat-x" 也不重复

Image on body not repeating even when specifying "repeat-x"

html

css

background-image