Question

an overview picture of my problem

大家好，我检查了几乎所有的解决方案但我无法让它工作，因为我真的很新。正如你在图片中看到的那样，我希望我的div背景图像像全屏一样宽，但我不希望高度被屏幕尺寸切割，我希望它仍然可以向下滚动。我希望这张照片足够令人难以置信，我希望你们有一点时间来帮助我，非常感谢你们！

编辑：that是我正在寻找的确切效果。

edit2：到目前为止我能做什么（我不想给高度一个特定的数字，我希望它能够自然适应不同的屏幕尺寸，我不知道每个屏幕的高度有多高屏幕，我给它1300高度，这对我的笔记本电脑来说是好的，但在我的手机上，天哪，这是一团糟）：

   #my_section_id_1 {
    background-image:url("http://i.imgur.com/bv60Q0Z.jpg");
    background-repeat:no-repeat; 
    background-size:100% auto;
    height: 1300px;
    }

<section id="my_section_id_1">
<h1>my_section_id_1_content</h1>
</section>
<section id="my_section_id_2">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</section>

Answer 1

您必须将HTML元素的height设置为大于屏幕高度的特定数量。

Answer 2

您可以将img width设置为100％：

img {
width:100%;
height:auto;
}

但我宁愿建议在某个部分添加背景并在其上设置背景图像，这样您就可以在其底部添加更多部分，而不会使滚动影响背景图像。

section {
background-image:url("http://www.w3schools.com/css/trolltunga.jpg");
background-repeat:no-repeat; 
background-size:100% auto;
height: 200px;
}

＆＃13;

    #my_section_id_1 {
    background-image:url("http://www.w3schools.com/css/trolltunga.jpg");
    background-repeat:no-repeat; 
    background-size:100% auto;
    height: 200px;
    }

＆＃13;

<section id="my_section_id_1">
<h1>my_section_id_1_content</h1>
</section>
<section id="my_section_id_2">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</section>

＆＃13;

Answer 3

您可以使用：

<div class="bg"></div>

这个css：

.bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url("http://www.lorempixel.com/800/800");
  background-repeat: no-repeat; /*Avoid the image to repeat*/
  background-size: cover; /*Make the image full size*/
  background-position:center; /*Center the img*/
}

工作DEMO。

.bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url("http://www.lorempixel.com/800/800");
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
}

<div class="bg"></div>


<!-- To make the page scrollable -->
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>
<p>Stuffs..</p>

如何使div图像宽度全屏，但让高度超出屏幕

3 个答案: