Search code examples
cssbackground-imagepseudo-element

Background image with pseudo-element in CSS

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:

  1. Make it work with ::after instead of ::before
  2. 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!

Solution

  • 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>