CSS image not working

Question

我正在创建一个网站，并尝试了许多不同的方法来显示背景图像，但它只在Visual Studio中可见，而不是在运行该项目时显示。

代码：

Header 
{ 
    background: url('file:///SomePath.png'); 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 176px; 
    background-color: #AAAAFF; 
    margin-top: 0px; 
    background-size: contain; 
} 

Answer 1

是在同一个文件夹中的图片的形象呢？你最好的选择是让他们在同一个文件夹中测试它们以确保它们正常工作。 I.E.把图片和CSS文件放在同一个文件夹中，这样你的标题看起来就像。

header { 
background:url('CompetitiveStreakTopBanner.png'); 
background-repeat: no-repeat; 
width: 100%; 
height: 176px; 
background-color: #AAAAFF; 
margin-top: 0px; 
background-size: contain; 
} 

如果这样的作品，你可以将文件移动到其他文件夹中包含相同的文件夹中，并使用类似background:url('../Elements/CompetitiveStreakTopBanner.png');

希望这有助于。

Answer 2

几个可能的罪犯

1. 您使用绝对路径指向你的形象，从其他位置观看您的网站时通常会导致麻烦。

   如果您的图像与调用该文件的文件位于同一文件夹中，则可以简单地说url(myImage.png)，而不包含路径的其余部分。最佳做法是指向相对路径，即相对于站点根目录的路径，因此url(../images/myImage.png)。

2. 通过在第一行中指定background而不是background-image，您可以使用shorthand method of writing CSS作为背景。 速记CSS需要一定的特定顺序的一组属性。如果其中一个无效/不正确，其余的将不起作用，因为浏览器会将其解释为无效规则。 Background可以采取：

   background: color image repeat position

   例如background: black url(.../myImage.png) no-repeat top left;

首先尝试改变这一点，所以：background-image: url(myimage.png);。或者，你可以结合你的CSS背景属性到一个单一的速记属性：

width: 100%; 
height: 176px; 
margin-top: 0px; 
background: #AAAAFF url('file:///SomePath.png') no-repeat top left; 
background-size: contain; 

如果还是不行，请尝试上述chaning的文件路径相对。

Answer 3

替换

背景：网址（ '文件：///SomePath.png'）;

与

背景：网址（ 'http://www.yoursite/foldercontainingthepicture/picture.png'）;