Opacity not working, even if I find no syntax error

Question

I am trying to put a background picture with medium opacity but unable to do so, here's my html:-

        
<body style="margin:auto;width:100%;height:100%;opacity:0.1;background-image:url('http://farm3.static.flickr.com/2098/2260149771_00cb406fd6_o.jpg')">
</body>

Possible duplicate of [CSS: set background image with opacity?](http://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity) — Mohammad Usman, Mar 22 '17 at 07:08

score 1 · Answer 1 · answered Mar 22 '17 at 07:13

Use div instead of body tag. And give a particular height to that div.

 <!DOCTYPE html>
        <head>
        <title>Your favourite travle partner</title>
        </head>

        <body>
            <div style="margin:auto;width:100%;height:400px;opacity:0.1;background-image:url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg')">

    </div>
        </body>

        </html>`

score 0 · Accepted Answer · answered Mar 22 '17 at 07:09

Instead of adjusting the body elemet, add an extra div to hold the background, better to separate the style into a css file.

#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('http://i40.tinypic.com/3531bba.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  opacity: 0.4;
}

<!DOCTYPE html>

<head>
  <title>Your favourite travle partner</title>
</head>

<body>
  <div id="background"></div>
</body>

Opacity not working, even if I find no syntax error

2 Answers2