Set page background image opacity

Question

How to set background image for entire page opacity to 0.4 ?

I tried with

html { 
  background: url(img01.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

   opacity: 0.4;
   filter: alpha(opacity=40); /* For IE8 and earlier */
}

but it set all element's on page opacity and i only want opacity of img01.jpg ??

This theme is the same as - http://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity — , Jun 26 '14 at 12:53
Possible duplicate of http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on?rq=1 — Sam Denton, Jun 26 '14 at 12:54

score 0 · Answer 1 · answered Jun 26 '14 at 12:50

You can't set opacity on a background image.

Instead, you could:

Make the background a semi-transparent PNG with the desired level of opacity. Depending on the size of the background this may not be a great solution as PNGs have a much larger filesize footprint than JPGs.
If the transparency is intended to be over a solid color (i.e. white or black) you could add a solid/flat background gradient on top of the background-image using rgba() colors to mimic the desired opacity (e.g. if you wanted the background image to have 60% opacity, add a 40% opacity black flat background gradient that isn't actually a gradient on top).
Add your background-image to a psuedo-element like ::after that is absolutely positioned to fill the containing element and manipulate the opacity of this image-only "fake background" layer.

score 0 · Accepted Answer · answered Jun 26 '14 at 12:55

Without changing the image, this is the way I would do it.

Using pseudo element positioned fixed or absolute:

html:after {
    content : "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url(http://dummyimage.com/1000x1000/000/fff.png); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

You can see this jsfiddle for an sample.

score -1 · Answer 3 · answered Jun 26 '14 at 13:05

-1

when you have using opacity in parent class then it is apply over parent class and child class also. so u have use the rgba color code in place of image.

answered Jun 26 '14 at 13:05

Prabhaker shukla

212
1
7

Set page background image opacity

3 Answers3