How to Set an Opacity Only to the Background Image of a Div

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

How to change only the background image opacity?

You could also do this by a pseudo element. Something like this:

section {
   position: relative;
   padding: 15px;
   width: 100%;
   height: 700px;
}

section::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .5; 
  background-image: url(../IMG/Photo_NR1.jpg);
}

So you do not need an image tag and you separating the design from content.

Apply opacity to background image but not text

opacity is not an inherit property but affect the content so when you increase the opacity of .image that also affects to .text, you can use pseudo elements and background: rgba() to achieve what you want like this:

Here a working JSFiddle to play with

.wrap {    width: 100%;}.image {    background-image: url("https://i.stack.imgur.com/gijdH.jpg?s=328&g=1");    position: relative;    height: 100vh;}.image:before{    content: '';    position: absolute;    top: 0;    right: 0;    left: 0;    bottom: 0;    background: rgba(0,0,0,0.7);}.text {    color: #FFF;    position: relative;}

<div class="wrap">    <div class="image">        <div class="text">            <p>I LOVE YOU</p>        </div>    </div></div>

CSS opacity only to background color, not the text on it?

It sounds like you want to use a transparent background, in which case you could try using the rgba() function:

rgba(R, G, B, A)
R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).
RGBa example
background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: rgba(51, 170, 51,  1)    /* full opaque green */ 

A small example showing how rgba can be used.

As of 2018, practically every browser supports the rgba syntax.

How to apply div opacity only on background image and not on text inside

A slightly different approach from Vitorino Fernandes' answer would be to 'nest' a pseudo element between the text and background:

div {  position: relative;  height: 300px;  width: 300px;  display: inline-block;  color:white;}div:before,div:after {  content: "";  position: absolute;  height: 100%;  width: 100%;  top: 0;  left: 0;  transition:all 0.8s;}div:before {  background: rgba(0, 0, 0, 0); /*this changes on hover - you might just want to change it here to get rid of the hover altogether*/  z-index: -1;}div:after {  z-index: -2;  background: url(http://placekitten.com/g/300/300);}div:hover:before{  background: rgba(0, 0, 0, 0.6);  }

<div>Hover to see effect</div>

How to set opacity ONLY to the background

You can specify the background color with rgba()

element{
   background-color: rgba(255, 255, 255, 0.5);
}

The first three values are the RGB levels, and the last one is the opacity (in this case 50% opaque, the higher the number the less transparent)

How to make opacity only for background?

Hi if your background does not has any Images.
Then easily you can apply opacity on it background.
Here is some example you can use ->

background-color: #00ff0055;
/*-- The value after six digit is your alpha color or opacity of background.--*/
background-color: #0f05; /*-- Same as previous one.--*/
background-color: rgba(0,255,0,.5); /*-- a extend for alpha color--*/

Hope this help you.

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 */}