How to Make Body Background Image Transparent in CSS

How can I set the image opacity for body background

There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.

it can be done like this

body::after {
  content: "";
  background: url(http://ib1.keep4u.ru/b/070815/ef2714da63d5940bf5.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Check it here
http://jsfiddle.net/dyaa/k4dw5hyq/2/

Edit: no need for opacity and filter in the body tag anymore
http://jsfiddle.net/dyaa/k4dw5hyq/3/

How to make body background image transparent in css?

Put your background to body::after

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
body {
  width: 1200px;
  height: 1200px;
  display: block;
  position: relative;
  margin: 0 auto;
  z-index: 0;
}

body::after {
  background: url(http://kingofwallpapers.com/background-image-laptop/background-image-laptop-018.jpg);
  content: "";
  opacity: 0.9;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;   
}

div {
  font-size: 36px;
  color: white;
}

    </style>
</head>
<body>
 <div>
   The text will not affected by the body
 </div>
</body>
</html>

Make HTML body background image transparent

HTML:

<div id="backgroundImage">

    <div class="main">

    </div>

</div>

CSS:

#backgroundImage{z-index: 1;}

#backgroundImage:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-image: url(http://static.tumblr.com/25bac3efec28a6f14a446f7c5f46b685/hywphoq/ufoniwv6n/tumblr_static_ldhkrazuoqo4g0s0sk8s4s4s.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    opacity: 0.4;
    filter:alpha(opacity=40);
    height:100%;
    width:100%;
 }

.main{
   height:320px;
   width:320px;
   margin:auto;
   background-color:green;
   z-index:-1;
   opacity: 1;
   filter:alpha(opacity=100);
}

JSFIDDLE DEMO

Site reference: http://nicolasgallagher.com/css-background-image-hacks/demo/opacity.html

Changing the opacity of background image in css

HTML Background with BODY filter

<HTML> gets a background image while <body> gets a 50% transparent white (layer of transparent color using RGBA)

html, body {  height:100%;  padding: 0;  margin: 0;}
html {  background:url(https://i.ytimg.com/vi/qOfuTI5165w/maxresdefault.jpg) no-repeat center center fixed;}
body {  background:rgba(255,255,255,0.5); /* applies a 50% transparent white background */}

How to change element's Opacity / Transparency and keep body background-image still visible?

You can set background for the element:
background-color: rgba(0,0,0,0.5);
Pay attention at 0.5. It run from 0 to 1. More high more dark.

Can I set an opacity only to the background image of a div?

Nope, this cannot be done since opacity affects the whole element including its content and there's no way to alter this behavior. You can work around this with the two following methods.

Secondary div

Add another div element to the container to hold the background. This is the most cross-browser friendly method and will work even on IE6.

HTML

<div class="myDiv">
    <div class="bg"></div>
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv .bg {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
    width: 100%;
    height: 100%;
}

See test case on jsFiddle

:before and ::before pseudo-element

Another trick is to use the CSS 2.1 :before or CSS 3 ::before pseudo-elements. :before pseudo-element is supported in IE from version 8, while the ::before pseudo-element is not supported at all. This will hopefully be rectified in version 10.

HTML

<div class="myDiv">
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
}

Additional notes

Due to the behavior of z-index you will have to set a z-index for the container as well as a negative z-index for the background image.

Test cases

See test case on jsFiddle:

Using CSS 2.1 :before
Using CSS 3 ::before

transparent background image

You can't adjust the translucency of a background image with CSS.

You can adjust the translucency of an entire element (opacity) or of a plain background rgba(), but not a background image.

Use an image format that supports translucency natively (such as PNG) and embed the translucency you want in the image itself.