Background image transparency with CSS3?

Question

Is there a way to add transparency to a background-image using CSS3?

Answer 1

There is a perfect tool named: Petteriny (transparent pixel maker) which create any transparency pattern you need . It also generate the CSS you need. here is an example what this tool makes.

.myDiv{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQIW2NUTmk3vjun8iwjAxCAOAA2KgVERG1HmQAAAABJRU5ErkJggg==
) repeat;}

You use it, this like this in your html

 <style> 
.transback {
   background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQIW2NUTmk3vjun8iwjAxCAOAA2KgVERG1HmQAAAABJRU5ErkJggg==
) repeat;}
  </style>
<div class="pure-u-1 transback">
 your text over image
</div>

In this tool it's also possible to download the pattern

Answer 2

You can save that image with opacity from Photoshop or use a solid or gradient color as background with an RGBA color: background-color: rgba(0,0,0, .4)

Answer 3

Background Image Transparency is not part of the CSS Specification (though it should be, please someone put it in, I think Chrome may actually support this though).

However a partial way to mimic transparency, with a background image, is to include a linear-gradient in the CSS. It will be placed on top of the background image and if you use the background color of the body, you can create the effect of the image fading into the background of the webpage, But you need to use the RGBA color mode and transition from the same color to the same color with different alpha settings like so:

background:linear-gradient(to right, rgba(0,0,255,0), rgba(0,0,255,1)), url(images/myImage.jpg) fixed no-repeat top center;

Answer 4

You can also accomplish a transarent background image using the css3 pseudo classes and opacity. For example....

HTML:

<div class="transparent-background">
        ...content that should have 100% opacity...
</div>

CSS:

.transparent-background { ... }
.transparent-background:after {
    background: url("../images/yourimage.jpg") repeat scroll 0 0 transparent;
    opacity: 0.5;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}

See the sample - http://jsfiddle.net/sjLww/

Answer 5

Add the image to the HTML tag and add a background-color using rgba(0,0,0,[your opacity])

html {
    background:url('image.jpg') #303030; 
    background-size:cover;
}

body {
    background:rgba(0,0,0,0.7);
}

Answer 6

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);
}