Question

我在将容器背景设置为特定图像时遇到问题我的容器css如下所示。

.info1 {
    background-image: url(../images/backgroundbox.jpg);
    border-style:double;
    border-width: 5px;
    border-color: #3f7171;
    width: 290px;
    height: 250px;
    margin: 10px;
    float: left;
}

我在html中有容器，但每次我保存文件并在浏览器中查看网页时，它只是将容器的背景设置为灰色。

这是html文件......

<div class="info1">

</div>

我尝试将背景图片添加到我的css

background-image: url(../images/backgroundbox.jpg);

并尝试使用图片所在文件夹的完整网址路径，并尝试使用它...

background-image: url('../images/backgroundbox.jpg');

和

background-image: url("../images/backgroundbox.jpg");

再一次，我总是以灰色背景回来，我似乎无法解决问题，我觉得我可能在某个地方犯了一个愚蠢的错误，但只是可以＆＃39 ;似乎发现它。

Answer 1

它适用于我，请参阅此fiddle，未对您的代码进行任何更改，使用示例图片网址

background-image: url('http://goodlogo.com/images/logos/hi_logo_2750.gif');

问题似乎出现在您的图片网址中，请检查一次。

Answer 2

由于评论需要50个声誉，我想我必须做出答案并将其计算在内。

它与文件位置有关。

尝试检查元素，单击控制台中的图像链接，看看是否可以找到它。如果您可以在此处发布您的网站结构，也会有所帮助。

代码是正确的，这里是an example。

.info1 {
    background-image: url("http://miriadna.com/desctopwalls/images/max/Ideal-landscape.jpg");
}

所以问题应该出现在“../images/backgroundbox.jpg”中。确保相对路径正确。此外，尝试确保div是可见的（通过显示设置为块或内联块的一些内容，特定宽度和高度。

Answer 3

如果您确定网址正确无误，请尝试添加background-size: 100%。可能只是图像很大而灰色是该图像的左上区域。

如何将<div>中的背景设置为图像</div>

3 个答案: