Lighten my background image to get text in the body visible

Question

I got a background image for my homepage, but I can't seem to lighten the background image.

My html file looks like this:

<!DOCTYPE html>
<html>
<head>
    <title> Homepage </title>
    <style>
    body {
        background: url('static/img/background1.jpg') no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        color: #000;
        font-family: 'Roboto Mono', monospace;
        opacity: 0.8;
        position: relative;
        background-blend-mode:lighten;
      }
   </style>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1> a title </hi>
  <p> some text </p>
</body>
</html>

I thought the opacity setting or the background-blend-mode would help, but this doesn't seem to work.

I also tried the following, based on a comment:

body {
        font-family: 'Roboto Mono', monospace;
        position: relative;
      }

 body :after {
        opacity: 0.9;
        background-img: url('static/img/background1.jpg') no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }

But in this case, the background image doesn't shows at all...

This is an image of the page when I use the original setting (first set up with only body{}):

But there is some text in it which we cannot see:

How can I lighten my background in this set up?

Add the image `:after` your body. That way the opacity will attach to the image without affecting anything else. i.e. https://stackoverflow.com/a/10849233/3367818 — noamyg, Dec 30 '21 at 18:29
Doesn't seem to work, unless I'm doing it wrong. Adding the image after the body requires only the change ```body :after```, right? But even when I mimmick your reference to my code, it doesn't take any image at all. — Steven01123581321, Dec 30 '21 at 18:44

score 1 · Accepted Answer · answered Dec 30 '21 at 19:09

It's highly unlikely that you want the whole of your body to have opacity 0.8 - this will bring all its content down in opacity.

Instead you can put the background on a before pseudo element on the body and give that a lower opacity.

This snippet assumes you want the background to stay, so gives the before pseudo element position fixed, but you could of course have it just the same size as the body by giving it position absolute instead.

<!DOCTYPE html>
<html>

<head>
  <title> Homepage </title>
  <style>
    body::before {
      content: '';
      background: url('https://picsum.photos/id/1004/200/300') no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      opacity: 0.8;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    
    body {
      color: #000;
      font-family: 'Roboto Mono', monospace;
      opacity: 0.8;
      background-blend-mode: lighten;
      width: 100vw;
      min-height: 100vh;
    }
  </style>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <h1> a title </hi>
    <p> some text </p>
</body>

</html>

Note: you may get a suitable effect by looking into using filter for example.

score 1 · Answer 2 · answered Dec 30 '21 at 19:57

I see what you are trying to do. I would instead add a div on top of the image add give it a background color (say grey or white) with some opacity.

<body>
  <div>
    <div class="bg"/>
    <div>
      <h1> a title </hi>
      <p> some text </p>
    <div/>
  <div/>
</body>

and style would be something like:

<style>
 .
 .
 .
 .bg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    opacity: 0.5;
    z-index: -1;
  }
</style>

try adjusting opacity and color such that your text has to best contrast to be visible.

Lighten my background image to get text in the body visible

2 Answers2