HTML/CSS背景图像不显示？

我只是想设置我的背景，但这张图片不起作用。它的大小介于15到20MB之间，所以我尝试将其转换为5MB。还是不走运。我制作了一个非常小的图像，大小为25KB，这很有效，但只是重复了一遍。我的本地主机也不会显示大图像。有限制吗？我需要做什么才能获得完整的图像页面

body {
    background-image:url(background.jpg);
}

---

执行此操作以避免重复图像：

body
{
    background-image:url(background.jpg);
    background-repeat:no-repeat;
}

您还可以像这样试验

背景大小：封面

：

body
{
    background-image: url("http://www.google.com/doodle4google/images/carousel-winner2012.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
}

下面是JS Bin的一个演示，背景图像是一张漂亮的图片，用于测试行为：

---

执行此操作以避免重复图像：

body
{
    background-image:url(background.jpg);
    background-repeat:no-repeat;
}

您还可以像这样试验

背景大小：封面

：

body
{
    background-image: url("http://www.google.com/doodle4google/images/carousel-winner2012.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
}

下面是JS Bin的一个演示，背景图像是一张漂亮的图片，用于测试行为：

---

您需要为主体指定宽度和高度。 例如：

html, body {
   width: 100%; 
   height: 100%;
}

---

您需要为主体指定宽度和高度。 例如：

html, body {
   width: 100%; 
   height: 100%;
}

---

您可以使用速记

background

css属性：

background: url(background.jpg) no-repeat;

另外，您的

正文

可能没有100%的高度，因为页面上没有内容。将

html

和

body

的高度设置为100%，或者为页面添加更多内容

要使背景图像覆盖其整个容器，请使用：

---

IE8和更低版本不支持此操作。对于那些浏览器，您需要javascript回退。css-tricks.com上有一个展示不同技巧的网页。

您可以使用速记

背景
css属性：

background: url(background.jpg) no-repeat;

另外，您的
正文
可能没有100%的高度，因为页面上没有内容。将
html
和
body
的高度设置为100%，或者为页面添加更多内容

要使背景图像覆盖其整个容器，请使用：

IE8和更低版本不支持此操作。对于那些浏览器，您需要javascript回退。css-tricks.com上有一个显示不同技术的页面。
你不应该对背景图像有任何“大小”限制。更有可能的是，您的文件太大，以至于您没有等待足够长的时间来加载它，或者您没有设置宽度和高度。如果没有尺寸，您试图加载背景图像的元素tahat的大小基本上为0px x 0px。请参见以下JSFIDLE示例：


HTML：

<div class="container"></div>

重要提示：如果您希望将图像“拉伸”到视口的完整大小，一个简单的解决方案是使用插件，例如
 您的背景图像不应该有任何“大小”限制。更有可能的是，您的文件太大，以至于您没有等待足够长的时间来加载它，或者您没有设置宽度和高度。如果没有尺寸，您试图加载背景图像的元素tahat的大小基本上为0px x 0px。请参见以下JSFIDLE示例：


HTML：

<div class="container"></div>

重要提示：如果您希望将图像“拉伸”到视口的完整大小，一个简单的解决方案是使用插件，例如
 这并不是目前的问题，但你需要优化你的图像。即使是5兆字节的图像，即使是清晰详细的背景，也太多了。这不是问题所在，但你需要优化你的图像。即使是5兆字节的图像，即使是一个清晰和详细的背景也太多了。谢谢你，我刚刚制作了1284x1024，看起来很棒！谢谢，我刚做了1284x1024，看起来很棒！