Question

使用bootstrap，我试图为html页面的第一行设置背景图像。 .background CSS类包含有关设置背景图像的信息。当我创建一个<body>类时，它工作正常，并用背景图像填充整个页面。但是，当我尝试将它放在第一个<div>时，图像根本不显示。

据我了解，您可以为<div>设置背景图片。我做错了什么使这不起作用？

CSS：

.background 
{
background-image : url("image.jpg");
background-repeat : no-repeat;
background-size : cover;
}

HTML：

<body>
<div class ="row background">
  <div class="col-xs-12">
  <h1 class="titletext text-center" id="text" style="color : #000070; margin-top : 250px; display : none" ><b>Harness the power of the web</b></h1>
  <input class="center-block" type="image" id="down" src="down-arrow.png" style="margin-top : 350px; display : none" ></input>
</div>
</div>

<!-- start new row -->
<div class="row">
  <div class="col-xs-3">
    <!-- img> /img -->
  </div>
  <div class="col-xs-9">
    <p>
     Blob
    </p>
  </div>
<script>
$("#text").fadeIn(6000);
window.setTimeout(function ()
{
  $("#down").fadeIn(6000);
}, 6000);
</script>
</body>

此外，这是尝试将其放入JSFiddle：https://jsfiddle.net/yc1jnp6o/2/。由于某种原因，图像（我为小提琴而改变）或标题都不会显示在小提琴中。在我设置的apache服务器上情况并非如此。

Answer 1

使用背景时需要声明宽度和高度：

.background {
  background-image: url("http://www.w3schools.com/css/img_fjords.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 200px;
  height: 200px;
}

Answer 2

不要使用宽度，因为他在行中使用了col-xs-12，这意味着他想要100％宽度

.background {
   background-image : url("http://www.w3schools.com/css/img_fjords.jpg");
   background-repeat : no-repeat;
   background-size : cover;
   min-height:200px;
}

Answer 3

可能是你可以使用伪代码

.row.background:before{
  display:block;
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image : url("http://www.w3schools.com/css/img_fjords.jpg");
  background-repeat : no-repeat;
  background-size : cover;
  z-index:-1;
}

它涵盖整个行类

Check the fiddle

将背景图像放在<div>元素

3 个答案: