Opacity of background

[aysanahmadi7]

hi. how can i change the opacity of my background without effecting the elements inside it ?

[nestaenow]

If it is just a color background use the rgba color property. Where a is the value of the transparency of your background color.
But if it is an image you can use the opacity property. The default is 1.0, the smaller the 0. the less opaque it will be

[raven666]

If you’re a using colors as background you can set up it’s alpha channel:

background-color: rgba(0, 0 ,0, 0.6);

The last value stands for alpha, when it’s set on 0 means total transparency, 1 no transparency.

The Opacity property will affect the entire element not just the background, and it’s children, so if you are using an image as background you have 3 possible workarounds:

1 - Edit the image in any graphic software, change it’s opacity and save it as PNG. I use GIMP for that.

2- Use 3 containers and play with it’s positions (this a bit tricky solution, but does, the job)

<div class="container">
      <div class="transparent-box"></div>
      <div class="content"> more stuff </div>
</div>

CSS:

.container {
   position: relative;
}
.transparent-box {
   background: /*  your bg image */;
   opacity: 0.5;
}
.content {
   position: absolute;
   top: 0;
   left:  0;
   width:  100%;
   height:  100%;
}

3 - if you are trying just to “darken the image” this is another way:

(same html)
CSS:

.container {
   position: relative;
   background: /*  your bg image */;
}
.transparent-box {
   background:  rgba(0, 0, 0, 0.2);
   position: absolute;
   top: 0;
   left:  0;
   width: 100%;
   height: 100%;
}
.content {
/* nothing here */
}

[aysanahmadi7]

thank you raven. it helped a lot<3