1

I am trying to change the opacity of my background image to make it match the website. The problem is that the opacity: 0.5; change everything within the element. So not only the background image change but also the text and every other element in the section. How am i supposed to change only the color of the image? Here is my code:

section {
   background-image: url(../IMG/Photo_NR1.jpg);
   padding: 15px;
   width: 100%;
   height: 700px;
}

I have done some research but i couldn't find anything. I tried to have all my elements out of the <section> tag but then i was forced to change the position of the elements again. Thanks for your time :)

MA19112001
  • 164
  • 2
  • 3
  • 16
  • 1
    And you could also have found https://stackoverflow.com/questions/7241341/can-i-set-an-opacity-only-to-the-background-image-of-a-div, if you had just typed your question title into Google verbatim ... – CBroe Mar 29 '18 at 16:52
  • What am i supposed to do if my Question is marked as duplicate? Should i delete it? – MA19112001 Mar 30 '18 at 11:55

2 Answers2

6

You could also do this by a pseudo element. Something like this:

section {
   position: relative;
   padding: 15px;
   width: 100%;
   height: 700px;
}

section::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .5; 
  background-image: url(../IMG/Photo_NR1.jpg);
}

So you do not need an image tag and you separating the design from content.

Markus
  • 214
  • 3
  • 6
2

Try to seperate the image.

Html:

<div class="my-container">
    <img src="your/image">
</div>

Css:

.my-container {
    position: relative;
    overflow: hidden;
}
.my-container img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    opacity: 0.5;
}

Source: https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity

Sebastian Münster
  • 447
  • 3
  • 14