如何使用文本制作响应式全角X全高背景图像

Question

I want a webpage with different background-images including text among each other, but think I get stuck in this. Background-images must cover entire width of website and should be responsive. Furthermure Background-images may not overlapping each other as well. Have checked similar questions, but that does not work well for me in this case.

 .first-image { background-image: url(../Img/-MI4-KK.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: initial; background-color: #FFFFFF; background-origin: initial; background-clip: initial; } 

 <div class="first-image"> <div class="container"> <p>text</p> </div> </div> 

Answer 1

Have found the right answer after some research and effort. Depend on the height of the image I figured out that background-size:cover will affect the width and height of image that have been shown. Therefore I have replaced that with 100% auto. Furthermore after resizing the screen there was a white space under each image, which was something I would not want to see. In response to that I added padding-bottom of 55% (for someone who is interested how I came to this percentage: 1080 height / 1920 width x 100% = +/- 55%).

 .first-image { background-image: image 1920 x 1080 A; background-size: 100% auto; background-repeat: no-repeat; width: 100%; padding-bottom: 55%; } .second-image { background-image: image 1920 x 1080 B; background-size: 100% auto; background-repeat: no-repeat; width: 100%; padding-bottom: 55%; } .third-image { background-image: image 1920 x 1080 C; background-size: 100% auto; background-position: 100%; background-repeat: no-repeat; width: 100%; padding-bottom: 55%; } 

Answer 2

Here's a possible solution for you: http://codepen.io/anon/pen/GoXpXv

I got rid of the container for you because you didn't define it in your CSS. I created different classes for each of the image sections and have them taking up 100% of the width and 33.333% of the height. I set the body, html and div p margins and padding to 0 so there would be no white space around it. This will adjust to any screen size. Let me know if you have any questions.

HTML:

<div class="first-image">
  <p>first image</p>
</div>
<div class="second-image">
  <p>second image</p>
</div>
<div class="third-image">
  <p>third image</p>
</div>

CSS:

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
.first-image {
  width: 100%;
  height: 33.333%;
  background-image: url(http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg);
  background-size: cover;
  background-position: center;
}
.second-image {
  width: 100%;
  height: 33.333%;
  background-image: url(https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg);
  background-size: cover;
  background-position: center;
}
.third-image {
  width: 100%;
  height: 33.333%;
  background-image: url(http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg);
  background-size: cover;
  background-position: center;
}
div p {
  margin: 0px;
  color: #FFFFFF;
}