HTML背景图片无法正确重复

时间:2014-05-15 10:48:39

标签: html css html5 image css3

我正忙着从psd模型设计一个网站,但是我无法正确重复图像。

这是模型:

enter image description here

以下是我网站的图片 (注意背景在结束前如何停止)

enter image description here

需要注意的是,当我拿走css height属性时,背景图像完全消失,我觉得很奇怪......?

bg图像只是一个重复的小图像。

如果有人可以告诉我我做错了什么,我会一直坚持这一点,我将非常感激。

#wrapper {
    background: url("images/background.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    height: 1000px;
    margin: 0 auto;
    padding-left: 0;
    width: 1380px;
}

如果我要添加更多代码,请告诉我。

3 个答案:

答案 0 :(得分:2)

我认为问题是您已对heightwidth进行了硬编码。因此,在覆盖指定的px之后,背景会中断。将高度设置为;

height:100%;
width:100%;

答案 1 :(得分:0)

将高度增加到2000px

 height: 2000px;

答案 2 :(得分:0)

尝试添加height: 100%px 3000px等{根据您所需的网页长度)。目前background重复正常,但重复的高度由您硬编码,小于页面长度。

最好不要硬编码高度。好像页面长度增加,你必须一次又一次地改变高度。对此的正确解决方案是提供height: 100%;

祝你好运!