Darken the photo beyond the text

Question

I need to darken the photo, but if I do it in the following way, I also darken the text and the button. How can I dim the background without text? Any tips?

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
    body, html {
        height: 100%;
        line-height: 1.8;
    }
    .bgimg-1 {
        background-position: center;
        background-size: cover;
        background-image: url("{{ asset('img/road.jpg') }}");
        height: 100vh;
        filter: brightness(20%);
    }
</style>

<header class="bgimg-1 w3-display-container w3-grayscale-min" id="home">
    <div class="w3-display-left w3-text-white" style="padding:48px">
        <span class="w3-jumbo w3-hide-small">llo facilis</span><br>
        <span class="w3-xxlarge w3-hide-large w3-hide-medium">llo facilis</span><br>
        <span class="w3-large">llo facilis nesciunt volupt</span>
        <p><a href="" class="w3-button w3-white w3-padding-large w3-large w3-margin-top w3-opacity w3-hover-opacity-off">llo facilis nesciunt volupt</a></p>
    </div>
</header>

Can you provide us with a minimal working example (e.g. in codepen or jsfiddle)? — Dom, Aug 31 '20 at 16:48
Whenever you plan to use a background image, you should also set the `background-color` too. That way, if the image fails to load for any reason, the user still sees the visual separation you're trying to achieve. Plus, there's a second advantage: you can use `background-blend-mode` to filter the types of colors that make it through. Try a few of these options with various shades of background colors and I'm sure you'll find something that works. https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode — brystmar, Aug 31 '20 at 17:08

score 4 · Answer 1 · answered Aug 31 '20 at 16:58

In lieu of the filters you could apply a second linear-gradient background image on top that's a solid color with whatever opacity suits your needs:

body,
html {
  height: 100%;
  line-height: 1.8;
  color: white; /* added to make the text easier to see */
}

.bgimg-1 {
  background-position: center;
  background-size: cover;
  background-image:
    /* semi-opaque black overlaid on top of the bg image */
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    /* actual bg image */
    url("//placekitten.com/400");
  height: 100vh;
}

<header class="bgimg-1 w3-display-container w3-grayscale-min" id="home">
  <div class="w3-display-left w3-text-white" style="padding:48px">
    <span class="w3-jumbo w3-hide-small">llo facilis</span><br>
    <span class="w3-xxlarge w3-hide-large w3-hide-medium">llo facilis</span><br>
    <span class="w3-large">llo facilis nesciunt volupt</span>
    <p><a href="" class="w3-button w3-white w3-padding-large w3-large w3-margin-top w3-opacity w3-hover-opacity-off">llo facilis nesciunt volupt</a></p>
  </div>
</header>

score 1 · Answer 2 · answered Aug 31 '20 at 16:56

The text needs to be in a separate container than the element that is being darkened.

.box {
  width: 200px;
  height: 200px;
  background: #000;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  color: white;
}

.box .img {
  background: url(https://images.pexels.com/photos/3150553/pexels-photo-3150553.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  filter: brightness(60%);
}

<div class="box">
  <h1>Text</h1>
  <div class="img"></div>
</div>

Darken the photo beyond the text

2 Answers2