Question

目前我正在尝试为课程提供背景图像并使其垂直重复。

我使用以下代码作为图像：

background: url('http://ponyterrance.co.uk/gmod-loadingscreen/main.png') repeat-y;

我也试过

background-image: url('http://ponyterrance.co.uk/gmod-loadingscreen/main.png') repeat-y;

但我从中得不到任何东西。有问题的页面可以在这里看到：http://ponyterrance.co.uk/gmod-loadingscreen/arkonn.html如果你想更好地了解我的意思

它非常恼人，因为我在4小时前制作的页面上使用了div背景上完全相同的代码。我看不出有什么不对劲。我已经看了一会儿，现在正在寻找丢失的东西，但它似乎都在那里。很多人可能会马上看到它，但我是盲目的。

此外，我尝试过http链接文件以及'main.png'作为它在同一目录中。

JSFIDDLE：http://jsfiddle.net/tejashsoni111/U5CLS/

Answer 1

为您正在使用的图像添加背景大小，否则将图像的大小减小到容器尺寸。

Answer 2

你的div很小，覆盖div的图像部分是白色的，因此不可见。使用彩色图像或更改div的大小以查看完整图像。

Answer 3

div是空的吗？如果是这样，你试过在宽度和高度上加一个非零值吗？

width: /* != 0 value here */ ;
height: /* != 0 value here */ ;

也许尝试单独移动重复

background-repeat:repeat-y;

如果有任何更多的想法会弹出我的脑袋，我会更新答案

Answer 4

使用以下样式，它将起作用

#main .content {
background-image: url("http://ponyterrance.co.uk/gmod-loadingscreen/main.png");
background-position: center center;
background-repeat: repeat;
}

Answer 5

尝试没有高度和宽度，

#main .content {
  background: url('http://ponyterrance.co.uk/gmod-loadingscreen/main.png') repeat-y 0 0;
  overflow:hidden; 
}

div不会显示背景

5 个答案: