CSS background Image responsively cover the bottom-CodePudding

all! I meet a CSS question. The below picture is the layout of my web page. What I want to implement is component A, B and C keeps unchanged in various sizes of screen, and these components have fixed margin and padding. And D has a background image cover its content, and this background image can responsively cover the D component dose not have any blank space. Sorry to my the English, not native spaker.

I implement this layout by using Vuetify and nuxtJS, due to the regulation of the company, I cannot upload the code, but I append the similar work that I did.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box; 
    }
    .a{
      margin: 40px auto;
      height: 200px;
      background-color: red;
    }
    .b{
      margin: 40px auto;
      height: 200px;
      background-color: yellow;
    }
    .c{
      margin: 40px auto;
      height: 200px;
      background-color: blue;
    }
    .d{
      margin-top: 40px;
      height: 100%;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div >A</div>
  <div >B</div>
  <div >C</div>
  <div >D</div>
</body>
</html>

What I want to implement is that the background colour or image of D component can cover to the end of the screen and without leaving any blank space. And it can also responsively designed.

CodePudding user response：

Then you should give width to your boxes.

.a, .b, .c{
  width: 200px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box; 
    }
    .a{
      margin: 40px auto;
      height: 200px;
      background-color: red;
    }
    .b{
      margin: 40px auto;
      height: 200px;
      background-color: yellow;
    }
    .c{
      margin: 40px auto;
      height: 200px;
      background-color: blue;
    }
    .d{
      margin-top: 40px;
      height: 100%;
      background-color: pink;
    }
    .a, .b, .c{
      width: 200px;
  </style>
</head>
<body>
  <div >A</div>
  <div >B</div>
  <div >C</div>
  <div >D</div>
</body>
</html>

CodePudding user response：

Edit: I just understood what you're trying to do. If you want the d component to fill all the screen you need to position: absolute; it inside a position: relative; element, like your entire page box. Example:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.relative {
  position: relative;
}

.a {
  margin: 40px auto;
  height: 200px;
  background-color: red;
}

.b {
  margin: 40px auto;
  height: 200px;
  background-color: yellow;
}

.c {
  margin: 40px auto;
  height: 200px;
  background-color: blue;
}

.a, .b, .c {
  width: 300px;
}

.d {
  height: 100%;
  width: 100%;
  background: url('https://via.placeholder.com/150x150');
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

<body >
  <div >A</div>
  <div >B</div>
  <div >C</div>
  <div >D</div>
</body>

I used z-index:-1; to bring the d element behind the other elements. I also used background-size: cover; to make the background image fill all the empty space. background-repeat: no-repeat; to make the image not repeat. Further, you need to use width in the absolute positioned element.