CSS: Semi-transparent background and an image

Question

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

I tried using the above to produce a semi-transparen

Answer 1

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