背景图像CSS

-2

我想设置一个HTML页面的背景图像，但图像不出现。该图像与html文件位于相同的文件夹中。背景图像CSS

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style/indexstyle.css" > 
<meta charset="ISO-8859-1"> 
<title>Insert title here</title> 
</head> 
<body> 
<heading>Overground Effective</heading> 

<nav class="nav"> 

     <ul> 
      <li><a href="index.html" style="color: black;">Home</a></li> 
      <li><a >About me</a> 
       <ul> 
        <li><a href="aboutme/whoami.html">Who am I</a></li> 
        <li><a href="aboutme/whatido.html">What I do</a></li> 
        <li><a href="aboutme/whatilike.html">What I like</a></li> 
       </ul></li> 
      <li><a href="aboutme/myskills.html">My skills</a></li> 
      <li><a href="gallery/gallery.html" style="color: black;">Gallery</a></li> 
     </ul> 
    </div> 
</nav> 
</div>

和CSS文件：

body{ 
background-image: url("/treewithroots.jpg"); 
background-size: cover; 
min-height: 100%; 
background-position: right; 
}

当我图片上传到Dropbox的，例如，它工作得很好。我怎样才能解决这个问题？

来源

2014-09-19 user3798144

尝试：删除'/'从URL – Sam1604 2014-09-19 12:10:24

@ Sam1604 - 这是行不通的。它与样式表不在同一个目录中。 – Quentin 2014-09-19 12:11:18

同样的事情发生，图像仍然没有出现。我试图更改文件夹，但它不起作用。 – user3798144 2014-09-19 12:11:27

用下面的替换你的风格：因为你的css文件在风格文件夹和你的图像是相同的文件夹作为html文件。

body{ 
    background-image: url("../treewithroots.jpg"); // change this 
    background-size: cover; 
    min-height: 100%; 
    background-position: right; 
}

假设你的文件夹结构如下图所示：

index.html 
treewithroots.jpg 
style/indexstyle.css

来源

2014-09-19 12:12:56

这工作谢谢你，虽然我不明白为什么我必须使用“../”时，图像是在与HTML文件相同的文件夹 – user3798144 2014-09-19 12:18:11

@ user3798144 - 由于URL是从样式表中解析的，而不是HTML文档。 – Quentin 2014-09-19 12:18:37

，因为你的图像不在你的CSS所在的同一个文件夹中。 – 2014-09-19 12:19:36

-2

你最好使用完整的图像的URL。这样，当你放置你的css时，你不需要关心目录结构。

background-image: url("http://www.yoursite.com/treewithroots.jpg");

来源

2014-09-19 12:15:35 Krogertek

-1

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

如上

来源

2014-09-19 12:16:53

我认为你必须给予适当的路径，此图像使用。尝试这样

body{ 
 
background-image: url("http://xsights.files.wordpress.com/2014/06/branding-logo.jpg?w=624"); 
 
background-size: cover; 
 
min-height: 100%; 
 
background-position: right; 
 
}

<heading>Overground Effective</heading> 
 

 
<nav class="nav"> 
 

 
     <ul> 
 
      <li><a href="index.html" style="color: black;">Home</a></li> 
 
      <li><a >About me</a> 
 
       <ul> 
 
        <li><a href="aboutme/whoami.html">Who am I</a></li> 
 
        <li><a href="aboutme/whatido.html">What I do</a></li> 
 
        <li><a href="aboutme/whatilike.html">What I like</a></li> 
 
       </ul></li> 
 
      <li><a href="aboutme/myskills.html">My skills</a></li> 
 
      <li><a href="gallery/gallery.html" style="color: black;">Gallery</a></li> 
 
     </ul> 
 
    </div> 
 
</nav>

来源

2014-09-19 12:20:26

回答

相关问题