Question: ```
body {
  background-image: url('cloud.png');
  background-color: rgba(255, 255, 255, 0.6);
}

```

I tried using the above to produce a semi-transparent white background above a background-image. It doesn't work, only the background image is shown and the background-color appears to be ignored. How can I adjust the opacity of a body background image?

Answer: 
You can use the css "before" pseudo class to create the white overlay and place before all the content in your DOM. Add z-index:-1 to ensure it doesn't sit on top of other elements: 

```
body {
    background: url("image.jpg");
}
body:before {
    content: "";
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.6);
}

```

[jsfiddle](http://jsfiddle.net/wY9XY/2/)
`background-color` is placed underneath `background-image`, not above it (when rendered in the web-browser). To put a semi-transparent white block over an image, you will need to place another different HTML element on top of it with `background-color`.