Background Image Transparency with CSS3

Background image transparency with CSS3?

If you are using an image tag to set the image, it can be easily changed using the CSS3 property "opacity".

It is written like this:

img {
    opacity: 0.4;
    filter: alpha(opacity = 40); /* For IE */
}

the value for opacity must be between 0 and 1. 0 being invisible and 1 being opaque.

If you are applying the background image by using the CSS "background-image" property then you can still use the opacity to change the background image but it must be done in a different way.

This is because the opacity value changes the opacity on the entire element when you only want the opacity changed on the background image.

There is an easy way to work around this: just overlay the content over the image and wrap them in a common parent and apply the opacity change to only the background part:

HTML

<div id="container">
    <div id="background" class="translucent"></div>
    <div id="content"></div>
</div>

CSS

.translucent {
    opacity: 0.4;
    filter: alpha(opacity = 40); /* For IE */
}
#container {
    position: relative;
    width: 200px;
    height: 200px;
}
#background, #content {
    position: absolute;
    top: 0;
    left: 0;
}
#background {
    background-image: url(http://www.thisisfake.com);
}

Background image transparency in DIV

Use opacity on the background div inside of the wrapper element.

.page {  position: relative;  width: 100px;  height: 100px;}.page::before {  content: '';  display: block;  position: absolute;  width: 100%;  height: 100%;  background:  url('http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg');  opacity: 0.2;  z-index: -1;}.box {  display: inline;  background: red;}

<div class="page">  My page  <div class="box">Red box</div></div>

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 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>

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.

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.

CSS: background color with opacity on background image

try this code

.background {    background:url('http://placehold.it/100x100');    position: relative;    height: 100px;  width: 100px;}
.layer {    background-color: rgba(75, 86, 160, 0.7);    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;}

<div class="background">    <div class="layer">    </div></div>

CSS Background Opacity

Children inherit opacity. It'd be weird and inconvenient if they didn't.

You can use a translucent PNG file for your background image, or use an RGBa (a for alpha) color for your background color.

Example, 50% faded black background:

<div style="background-color:rgba(0, 0, 0, 0.5);">   <div>      Text added.   </div></div>

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.

Background Image Transparency with CSS3