背景图片在css

Question

我的背景图片无法在我的网站上加载。我检查了谷歌浏览器中的检查选项，它告诉我，我给出的路径是错误的。我将图像放在css文件夹中以检查它是否能够正常工作，但它没有。我把它放回到images文件夹中并尝试了这个：

#background1{
background: url(../../images/rusteberg.jpeg);
        }

这也没有用。我在这里都没有选择。

Answer 1

作为＆＃34;无效路径的一般解决方案＆＃34;在网站上出现问题，您应该使用所有网站本地网址的基本路径（在斜杠/之前）。

所以你的CSS规则变成了：

#background1{
    background: url('/images/rusteberg.jpeg');
        }

我假设您的images文件夹是您网站地址的直接子项，因此：http://www.yourwebsite.org.uk/images/rusteberg.jpeg将是您要显示的图片的工作浏览器网址。

这意味着无论CSS文件的位置是什么，都无关紧要，因为资源位置现在不是到CSS位置，因此总会找到图像。

Answer 2

解决此问题的一个好方法是使用谷歌浏览器（或您喜欢的任何其他方式，我建议使用GC）检查员，使用Ctrl+Shift+I。

然后右键点击<div>，在右侧点击

background: url( '../../image.jpg' );

获取相关图片网址的定义，该图片网址没有正确的图片网址。

单击该链接，让浏览器尝试打开它。您可以在浏览器的地址栏中找到以下网址：

http://example.com/path///image.jpg

在那里，您可以将给定的URL与图像的URL相对于图像的相对路径进行比较。