Background image with pseudo-element in CSS

Question

I've been given the following code:

.container {
  color: white;
  height: 80vh;
  margin: 10vh 0 0 25vw;
  position: relative;
  width: 50vw;
}

.container::after {
  content: "";
  background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
  background-position: center;
  background-size: cover;
  filter: brightness(.5);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
}

.container_inside {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 1.5em;
  height: calc(100% - 4em);
  justify-content: center;
  padding: 2em;
  text-align: center;
  width: calc(100% - 4em);
}

.small {
  color: #e9e9e9;
  font-size: .7em;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The background</title>
</head>
<body>
<div class="container">
  <div class="container_inside">
    <p>Any fool can write code that a computer can understand. Good programmers write code that humans can
      understand.</p>
    <p class="small">Martin Fowler</p>
  </div>
</div>
</body>
</html>

There are two goals here:

Make it work with ::after instead of ::before
There is a missing line of code somewhere in CSS and its absence ruins everything. Add the missing property to the right place to make it look as intended.

I've found the missing line of code (content: "";), and replaced ::before with ::after, here's where I got:

.container::after {
  content: "";
  background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
  background-position: center;
  background-size: cover;
  filter: brightness(.5);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
}

I'm struggling to get the background image to expand to it's full size, because otherwise the task is solved. The code editor tells me task 2 is correct, but for some reason task 1 is not being accepted and I assume it has to do with the image size, but I might be wrong.

Ideally it should look like this: https://ucarecdn.com/d24c1329-c0a3-4bd6-948c-5cfd83466c86/

ideal view

Super appreciate any help with this!

well why do you use `width:50vw` on your container if you want it full width ? — Mihai T, Jul 25 '21 at 11:10

Anton · Answer 1 · 2021-07-25T18:46:04.430

Try to use this, with .container {width: 50vw;}

.container::after {
  content: '';
  background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
  background-position: center;
  background-size: cover;
  filter: brightness(0.5);
  position: absolute;
  top: 50%; /* changed */
  left: 50%; /* changed */
  bottom: 0; /* added */
  right: 0; /* added */
  width: 100vw; /* changed */
  height: 100vh; /* changed */
  transform: translate(-50%, -50%); /* added */
  z-index: -1;
}

The result:

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

.container {
  color: white;
  height: 80vh;
  margin: 10vh 0 0 25vw;
  position: relative;
  width: 50vw;
}

.container::after {
  content: '';
  background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
  background-position: center;
  background-size: cover;
  filter: brightness(0.5);
  position: absolute;
  top: 50%; /* changed */
  left: 50%; /* changed */
  bottom: 0; /* added */
  right: 0; /* added */
  width: calc(100vw - 30px); /* changed 3 times */
  height: calc(100vh - 30px); /* changed 2 times */
  transform: translate(-50%, -50%); /* added */
  z-index: -1;
}

.container_inside {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 1.5em;
  height: 100%; /* changed */
  justify-content: center;
  padding: 2em;
  text-align: center;
  width: 100%; /* changed */
}

.small {
  color: #e9e9e9;
  font-size: 0.7em;
}

<div class="container">
  <div class="container_inside">
    <p>Any fool can write code that a computer can understand. Good programmers write code that humans can understand.</p>
    <p class="small">Martin Fowler</p>
  </div>
</div>

I've composed a snippet from your code. Is it possible to get rid of the scrollbars? At least from the horizontal? — Gleb Kemarsky, Jul 25 '21 at 12:47
But it would be much better to fix the width and margins instead. — Gleb Kemarsky, Jul 25 '21 at 15:53
Added reset style and did fixed the width and margins. Also i did change height and width in class `.container_inside` to align into the center content. — Anton, Jul 25 '21 at 18:18

score 0 · Accepted Answer · edited Jul 25 '21 at 12:37

As Mihai T pointed out, the issue is with width. I simply removed width from the first container and it solved the problem.

FINAL SOLUTION

.container {
  color: white;
  height: 80vh;
  margin: 10vh 0 0 25vw;
  position: relative;
}

.container::after {
  content: "";
  background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
  background-position: center;
  background-size: cover;
  filter: brightness(.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.container_inside {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 1.5em;
  height: calc(100% - 4em);
  justify-content: center;
  padding: 2em;
  text-align: center;
  width: calc(100% - 4em);
}

.small {
  color: #e9e9e9;
  font-size: .7em;
}

<div class="container">
  <div class="container_inside">
    <p>Any fool can write code that a computer can understand. Good programmers write code that humans can understand.</p>
    <p class="small">Martin Fowler</p>
  </div>
</div>

Why are you using the left margin `25vw` for the container? Because of this, the image is shifted to the right side of the screen. — Gleb Kemarsky, Jul 25 '21 at 12:41

Background image with pseudo-element in CSS

2 Answers2