Question

需要一些帮助才能让我的背景图片显示在我的页面上。我无法让它工作，我无法弄清楚为什么，因为对我来说，似乎我拼写正确的一切。任何帮助将不胜感激。

HTML

'<html>
  <head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<div class="pageOne">


</div>

    <body>
  <ul class = "nav nav-pills">
<li>
  <a href="#">Daniel Collins</a>
</li>
<li class="pull-right">
  <a href="#">Contact Me</a>
</li>
<li class="pull-right">
  <a href="#">Portfolio</a>
</li>
<li class="pull-right">
  <a href="#">About Me</a>
</li>
</ul>

   </body>
</html>'

CSS

'body{
  background-color: white;
}

.nav-pills{
font-family:Orbitron;
font-size: 1.7em;
background-color: black;
};


.pageOne{
  background: url("../images/mountains.jpg");
};'

Answer 1

你的<div>是空的，这意味着它是0px高（需要有一些内容强制它'＃34;展开＆＃34;）。尝试在CSS中明确设置高度。

.pageOne {
    height: 100px;  /* or whatever height you want */
    background: url("../images/mountains.jpg");
};'

Answer 2

.pageOne是一个空div。您当前的内容位于<body>标记中。如果你把背景放在你的身体上，它会出现。无论如何，div不应该在body标签之外。如果你将div留在身体之外，它可能会导致错误。

Answer 3

查看此示例

你在html和css中犯了几个错误

pageOne为空，在其中放入一些内容，或者您可以从css中给出该div的高度
不要像这样添加;分号.pageOne{};仍然是css的一部分将无法执行

希望这会对你有所帮助

＆＃13;

body{
  background-color: white;
}

.nav-pills{
font-family:Orbitron;
font-size: 1.7em;
background-color: black;
}


.pageOne{
  background: url("http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1-600x319.gif");
  background-repeat: none;
  background-size: cover;
  display: inline-block;
  height: 100px;
  width: 100%;
  text-align: center;
}

＆＃13;

<html>
  <head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<div class="pageOne">
hi
</div>

    <body>
  <ul class = "nav nav-pills">
<li>
  <a href="#">Daniel Collins</a>
</li>
<li class="pull-right">
  <a href="#">Contact Me</a>
</li>
<li class="pull-right">
  <a href="#">Portfolio</a>
</li>
<li class="pull-right">
  <a href="#">About Me</a>
</li>
</ul>

   </body>
</html>

＆＃13;

为什么我的CSS背景图片不显示在我的页面

3 个答案: