0

footer {
    background-image: url("https://github.com/ChristophGrothe/home_plants/blob/main/flaschengarten/Screenshot%202022-03-18%20at%2016-55-25%20%23livingroomplants%20hashtag%20on%20Instagram%20%E2%80%A2%20Photos%20and%20Videos.png?raw=true");
    opacity: 0.5;
    height: 9em;
    display: flex;
    justify-content: center;
    font-family: 'Fredoka', sans-serif;
}

footer div {
    white-space: pre-line;
    margin: 2em 2em 0;
    
}
<footer>
          <div>
              © 2022.
              Lumos GmbH.
              Godric's Hollow, South-West England
          </div>
          <div>
              Company Registration Number: 54783538
              Registered Office: Oxford House, Lavenham, Suffolk, GB
          </div>
         </footer>

I know, there are similar questions but still I couldn't find the answer. A popular answer to this question is using rgba instead of opacity. However, obviously this is not possible as I have an image here, not a color.

Chris
  • 3
  • 2
  • You can separate the elements by adding the background in a pseudo-element for example: ```footer::after { background-image: ...``` – Rafael Lopes Mar 18 '22 at 17:29

0 Answers0