CSS Background Opacity

<div style="background-color:rgba(0, 0, 0, 0.5);">   <div>      Text added.   </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 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 can I change the background image opacity without affecting the background color?

Use an rgba color value and remove the opacity. For a white overlay you may use background:rgba(255,255,255, 0.5); while the last value (in this case 0.5) defines your transparency.

You can check this fiddle.

Change background image opacity with css

You can change the opacity in programs like Photoshop or GIMP.

Or you can do that with opacity in css. But you probably don't want that since you will have some content in your .intro which will then also be affected by it.

So I suggest following solution

.intro {
    position: relative;
    z-index: 0;
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: black;
    background-color: transparent;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}


.intro:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url('http://www.planwallpaper.com/static/images/canberra_hero_image.jpg'); 
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

https://jsfiddle.net/q63nf0La/

Basically you add :after element that will be a background image , you position it absolute ( your .intro will need to be position:relative; ) and then you set the z-index and opacity.

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.

How to change the background colour's opacity in CSS

background: rgba(0,0,0,.5);

you can use rgba for opacity, will only work in ie9+ and better browsers

CSS background-image-opacity?

If the background doesn't have to repeat, you can use the sprite technique (sliding-doors) where you put all the images with differing opacity into one (next to each other) and then just shift them around with background-position.

Or you could declare the same partially transparent background image more than once, if your target browser supports multiple backgrounds (Firefox 3.6+, Safari 1.0+, Chrome 1.3+, Opera 10.5+, Internet Explorer 9+). The opacity of those multiple images should add up, the more backgrounds you define.

This process of combining transparencies is called Alpha Blending and calculated as (thanks @IainFraser):

αᵣ = α₁ + α₂(1-α₁) where α ranges between 0 and 1.

How to change the opacity of background without changing the content of it?

Is this the sort of thing you're after?

  .about-section {    height: 100%;    padding-top: 50px;    text-align: center;  }    .background {    height: 100%;    width: 100%;    position: absolute;    background: url(https://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg);    background-repeat: no-repeat;    background-size: contain;    background-position: center;    opacity: 0.3;      }

<section id="about" class="about-section">  <div class="background">  </div>  <div class="container">    <div class="row">      <div class="col-lg-12">        <h1 class="head">About Us</h1>      </div>    </div>  </div></section>