CODEWITHSUNDEEP
css
Alice
Alice

Reputation: 424

Background image transparency with CSS3?

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

Upvotes: 17

Views: 58321

Answers (8)

Michael Fitchett
Michael Fitchett

Reputation: 399

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

Upvotes: 6

Richard de Ree
Richard de Ree

Reputation: 2540

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

Upvotes: 0

F J
F J

Reputation: 11

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;

Upvotes: 1

corradomatt
corradomatt

Reputation: 186

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/

Upvotes: 6

Sandy
Sandy

Reputation: 673

yes, IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent.

IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.

img
{
    opacity: 0.5; /*(Range = 0.0 to 1.0)*/
    filter: alpha(opacity = 50); /* (Range = 0% to 100%) For IE8 & ealier */
}

Also we can give OPACITY to any <DIV> tag and make transparent boxes.

Here is the *

FULL EXAMPLE

<html>
<head>
<style>
div.background
  {
  width:500px;
  height:250px;
  background:url(klematis4_small.jpg) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

Upvotes: 3

Chandan Gorapalli
Chandan Gorapalli

Reputation: 343

image opacity is not a CSS3 property it is a CSS2 property.There are no cross-browser compatibility issues using this property.It works fine even in older versions of IE.

The following is the syntax

img {
    opacity: 0.7;
    filter: alpha(opacity = 70); /* For IE */
}

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

for transparency to DOM elements background-color property rgba can be used as

div {
   background: rgba(200, 54, 54, 0.5); 
}

as there are compatibility issues with older versions of IE a fallback is advised.

div {
    background: rgb(200, 54, 54); /* The Fallback */
    background: rgba(200, 54, 54, 0.5); 
}

IE conditional sheets can be used as well for better performance.

<!--[if IE]>
   <style type="text/css">
   .color-block { 
          background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 
   zoom: 1;
} 

</style>

Upvotes: 0

Mircea
Mircea

Reputation: 11593

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)

Upvotes: 3

Mark Kramer
Mark Kramer

Reputation: 3214

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

Upvotes: 16

Related Questions