How to Set Background Image and Opacity in the Same Property

Can I set background image and opacity in the same property?

Two methods:

Convert to PNG and make the original image 0.2 opacity
(Better method) have a <div> that is position: absolute; before #main and the same height as #main, then apply the background-image and opacity: 0.2; filter: alpha(opacity=20);.

Add opacity to one of the many background images

You might need another way to solve it. You can make the whole element (e.g. the div containing the image) transparent using for example:

opacity: 0.5;

If you can make sure that your other content is not in this div but in other elements this will work. There is no "opacity"-effect that only applies to background images.

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

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 add transparency to a background image? (HTML + CSS)

You can utilize the rgba() function of the background property and combine it with the url() function. The RGBA has the A for "Alpha" in addition to Red-Green-Blue, which performs just like the opacity property; values range from 0 to 1. The trick to using RGBA in a background image is to use two parallel rgba() functions inside a linear-gradient(). Since rgba() returns a color value, it can be utilized as two color stops in the linear gradient...although they technically aren't color stops, since no transition happens from two like color values. Hackish, but simple and functional.

body {     background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),                 url('https://images.freeimages.com/images/large-previews/48d/woodgrain-texture-1151631.jpg')}

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/

Change background image opacity

There is nothing called background opacity. Opacity is applied to the element, its contents and all its child elements. And this behavior cannot be changed just by overriding the opacity in child elements.

Child vs parent opacity has been a long standing issue and the most common fix for it is using rgba(r,g,b,alpha) background colors. But in this case, since it is a background-image, that solution won't work. One solution would be to generate the image as a PNG with the required opacity in the image itself. Another solution would be to take the child div out and make it absolutely positioned.