There is no background-opacity
property in CSS, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Why not use
instead of fixed width and height?
Or as long as the position is absolute :), just use :
What if you don’t want it to be completely transparent .. how can/do you do that?
You need a set height on the div, in this case 100% has no reference as the div has no parent. The set height and width are representative of the component you’re giving a background to.
That was used on the after.
What is the browser support for this snippet?
Known support: Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 9+
yeah!
I use
filter: alpha(Opacity=90);
opacity: 0.9;
yeah, but it opacifies everything,not just the background.
then what is your result?
@jumplink:This is not true I am currently using filter: alpha(Opacity=30); opacity: 0.3; on my active website without issue.
@jumplink that’s only if he’s putting it on the parent, he’s not suggesting that. :P
I would opt for opacity over filter from a browser support perspective, given the right support I don’t see the difference, does one give better performance?
This is a 100% legitimate CSS trick to change only the opacity of the background-image, or background color (in this case):
/* I’m taking lightgrey for the background, here */
background-color: rgba(211, 211, 211, 0.3);
Hope this helped!
@Black Panther
How does it work for background-image?
Nice!
Thanks for your trick and for this star here in comment box :D.
Any hack to work it with IE 7 and 8?
upgrade the browser ;)
Mars
Permalink to comment# AUGUST 17, 2012
I use
filter: alpha(Opacity=90);
filter: alpha(opacity=40); /* For IE8 and earlier */
This works great, but I’m not able to select/click the text in the ‘top’ div. Anyone found a fix for that?
You are not able to click inside most probably because you have more than one div inside. The solution to use classes with you div; See code below
}
div.transparentBox::after {
content: “”;
background-color: #ffffff;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
You can cheat it also with something like this:
how do you change the opacity of the background image only? trying this made everything but the background image change opacity..
nice tricks, this help me :)
Mother of god. This is perfect. I could not find a way to apply a background with opacity (which would fit its parent perfectly and not display over content), and thought I’d have to add a presentation div. This is one of the sickest tricks I’ve seen this year. I can expect mure more from my future website visually, thanks to you. Really, thanks, thanks, thanks, thank you so much.
“Sickest” tricks? ;-)
This is the css codes to make the image background transparent!
TRY IT…! :)
background: rgb(255, 255, 255) transparent ;
background: rgba(255, 255, 255, 0.8) ;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF) ;
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)” ;
*Only supported by IE
Why use code for background-image opacity?
The easiest way is exporting your .PNG allready with the right transparancy. That way you don’t need to code opacity. And it will be supported by all browsers including IE6 (if using png fix).
How do I change the opacity on mouseover? Without loading a new image or using a sprite.
Or,
How do I set the opacity to some arbitrary percentage on the front end?
Main reason I’d imagine would be to save download time. Semi-transparent PNGs in particular are quite heavy. I am looking at a 10k JPG vs a 100k PNG.
I’ll be using it to make text more readable when its layout changes at a responsive breakpoint, causing it to overlap the background image.
When I do this trick on the over the body element (so I can get a transparent color overlaying the background), it only displays the :after element in the initial view port frame. When I scroll down, it disappears. Any ideas around that?
JSFiddle here illustrating the problem:
http://jsfiddle.net/ccnokes/sqnKb/
Cool trick though.
Cameron, you can set your position from “absolute” to “fixed”. It should fix your problem.
JSFiddle here fix the problem:
http://jsfiddle.net/sqnKb/20/
Solutions to Cameron’s conundrum:
Cantidio Fontes’ solution works great.
In following with this articles instructions:
display: block and position were omitted from the parent, adding them works as expected too.
Hi, how could I reduce the background image opacity inside the textbox? I’ve got a username textbox within a user logo and want to reduce its opacity without effecting the textbox. Thanks before hand.
Hello,
How could I make the background image transparent other than using background : transparent or background : none
Try this with different opacity value to see this.
div.background
{
background:url(tree.gif);
background-size:100% 100%;
background-color:#ffffff;
opacity:.8;
background-repeat:no-repeat;
}
div.box
{
background:url(flwr.gif);
background-size:100% 100%;
background-color:#ffffff;
opacity:0.7;
background-repeat:no-repeat;
}
}
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.
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.
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.
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.
div.background
{
background:url(img_tree.gif);
background-size:100% 100%;
background-color:#ffffff;
opacity:.8;
background-repeat:no-repeat;
}
div.box
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-color:#ffffff;
opacity:0.7;
background-repeat:no-repeat;
}
}
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.
Instead of using an actual image, use rgba(255, 255, 255, 0.5) instead – combined with a technique from my coworker. Works like a charm.
I had to change the z-index from -1 to 1 for the shader layer to show up. (photoshop & gimp mentality)
The page is dark with a div background image and color that are white…
I didn’t want a contrasting color to show the actual image size and the whole div was way too bright!
So a little tint over the top cut down on the glare making everything nice and readable again.
Thank you for this; I was scratching my head trying to keep the content from dropping out too.
Sorry for the length, here’s my example in case others are having trouble with the stacking order too:
Excellent! Just what I needed. Thanks!
I know it’s an old question but for anyone else who may want to know the answer to ivan.pvd’s question:
Just add
:hover
for mouseover changes to opacity or any style; color, shadow, backgrounds, etc…Thanks for this helpful trick :)
me too, thanks.
Childish attempt to create something useful but winding up to be useless.
Uh oh, “nutsack” thinks you’re childish!
I had to dynamically generate the background images on the client side so i wanted to apply a class via jQuery so they would look transparent without the complexity to implement. So I used an inset box-shadow to achieve the same effect (even has a nice vignette look, but can be flat transparent if you adjust the spread enough):
How about for archive post thumbnails that are different widths?
How would you make sure a background color with opacity always displays full with of the image and not the entry title or entry header if you wanted the titles to display over the image?
This is what i have but it doesn’t control the width of the background color on different sizes post thumbnails
Seriously? 100kb png is what you call “heavy”? Maybe, compared to a 10kb jpg, but really, unless you’re downloading a million of them on one page, we have some pretty high speed internet these days. Unless you’re getting into megs, I wouldn’t worry about 10kb vs 100kb images. If you’re that worried about file size, use colors instead of images. It just sounds kind of petty to me, but whatever.
Some guy, that comment smacks of absolute amateurism. Not caring about freaking 90 Kbps? That is absolutely huge for an image of the size we’re talking. Take it and multiply by hundreds of potential images throughout the site, and multiply that by all the bandwidth you’re throwing in the toilet if you have any real viewership. There are still a few people on 56k and a ton of people on EDGE or 3G connections. Just because you have high speed internet at all times doesn’t mean everyone else does, and it doesn’t make your bandwidth free either. Developers like you disgust me. You care nothing for user experience, you should find another field.
Guys thank you very much for that piece of VERY handy code. Anyway I got it improved and wanted to return the favor.
I got a situation where I am dealing with dynamic “height” / “width” of the initial div so I am unable to set height / width of the :after selector (except with JS but that is too much work for lazy like me).
So I played around a little and came up with a pure CSS solution that does not care about height / width / padding or margin.
I hope I helped :)
http://jsfiddle.net/4CvZv/
well i am new to css. I will be really thankful if you could answer my queries.
I am having trouble understanding different values of “display” and “position”.
what difference each value make and when to use which one.
Thanks in advance
How to use it in uploading logo in your WordPress blog?
Excellent Bro. Good Example for background image opacity…
Thanks
Hey guys im trying to get this working on my site for my background image here is my code:
.container::after {
The problem is it wont show my background image when i put it in the url. It just shows up with the stylized grey gradient background. But I want it to loook like my image has opacity. Will this work or should I just use photoshop?
all of those tempted to use the filter for IE8 compatibility- Keep in mind:
if you do this, use a seperate IE7-8 CSS include and put it there because filters add a huge
memory impact on a website and are not needed on IE9+
or… since they are about 3% of the internet… ignore those folks who refuse to upgrade their browser so you do not slow down the rest of the IE users.
Had some issues implementing this (backgrounds weren’t showing up), turned out it had to do with z-index, the div was in front of the container, but the ::after was getting put behind.
Increasing the z-index of the div fixed this.
Thanks for posting Sam. This is a great trick and was working fine until I removed opacity from an ancestor element, causing the :after background to disappear. Changing the :after z-index didn’t fix it, but adding z-index:0 to the div itself fixed it.
Working Good…
Worked like a charm! didn’t have to reinvent the wheel ! :-) Thanks
WORKS PERFECTLY! Thanks!
Why use the ::after pseudo-element and move it back down using the z-index, instead of using the ::before pseudo element?
The less we do with the z-index, the better.
This is really awesome! Works exactly as expected and makes modifying backgrounds a breeze.
The z-index portion is actually pretty important. Without specifying the z-index, the overlaying object can make other things transparent. In my case I was making a background 100% width/height, with z-index disabled it makes the entire site have opacity applied to it through the pseudo element.
Can any one explain about end() in jQuery?
NICE!
i want to transparent my background image without take position relative, absolute, fixed etc. if i containg opacity 0 to 1 then my forground contents being transparent. i want only background- image transparency
Hi @parmod and everyone else
This is an easy CSS trick for darken you background-image without any other css stuff.
In your element where the background-image is, add background-color and background-blend-mode like this:
.elementWithBackground {
background-image: url(image/source);
background-color: rgba(0,0,0,.4);
background-blend-mode: darken;
}
In the background-color opacity value you decide how much opacity you want on your background-color.
Cheers!
Hi everyone!
This is an easy CSS trick for darken you background-image without any other css stuff.
In your element where the background-image is, add background-color and background-blend-mode like this:
.elementWithBackground {
background-image: url(image/source);
background-color: rgba(0,0,0,.4);
background-blend-mode: darken;
}
In the background-color opacity value you decide how much opacity you want on your background-color.
Blend mode its pretty supported by browsers except Explorer:
http://caniuse.com/#search=background-blend-mode
Cheers!
I have a rectangle box over image with some text and button. i want it all responsive. i have use img-responsive class from bootstrap. image becomes responsive but the box over and text and button should as resposive as image height and width decrease. i could achieve through media query but i have to write more than 10 to 15 media query for each resolution for manage box height and font and button as image height width decreases.
https://plnkr.co/edit/NYocGF7vsrx8Vnr3IzSI?p=preview
why not simply use a .png with transparency set in the image itself? I suppose the only downside is the file size would be a tad bit larger compared to a .jpg but the simplicity seems better than a css hack? …just sayin.
Using rgba color gradient you make transparent anything you like, including body background-image:
body{
background-image:linear-gradient(rgba(250, 250 ,250, .5), rgba(250, 250 ,250, .5)),url(”);
}
Everyone should just read this comment ^^
It beautifully works !!! Thanks !!!
I would like to recomment a great resource for free CSS textures and patterns: https://www.csstextures.com
How can I make this effect in CSS (image with white background transparent)?
https://www.photoshopsupply.com/actions/remove-white-background-photoshop
Hey Joana! It will require editing the photo in Photoshop (or some other editor), and it can be a tedious task depending on the detail of the image. What you link to there is a Photoshop action that attempts to make that task easier.
Once you have an image with the white background edited out, save it as an image file that supports transparency (.png) and then use it as the background image in your CSS. Unfortunately, CSS won’t remove the white background for you.
About: “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”.
THE EXAMPLE was given for a DIV.
Is it the same for BODY?
I tried, but… no success!!!
Thanks
Absolutely! The body element does indeed support
::before
and::after
like other elements, so the same sort of thing can be applied.Here’s an example: https://codepen.io/geoffgraham/pen/XWWMYQP
Thanks, Geoff, I will try it immediately. Very very kind and helpful
IT WORKS!!!!!! Thanks again!
For more background effect, you may use filter: brightness(70%); instead of opacity.
Hey, generally I don’t use ::after instead of I use linear-gradient.Do U know any cons for use linear-gradient instead of ::after pseudo element?
background-image: linear-gradient(to right bottom, rgba(255,255,255, 0.3),rgba(255,255,255, 0.3)), url(image.jpg);
Hi, do someone knows how i can make the image to cover all the element?
Hi Robert! You can use
background-size: cover;
for the background image to completely fill the element.I tried this and it wasn’t visible… I screwed around and found out that using negative
z-index
(-1) will make the pseudo-element (thebefore
orafter
) go behind an ancestor’s background color (if any), so this would work only if ALL the ancestors’ backgrounds are not set (or set totransparent
). So for example if I had set adiv
background somewhere up in the chains to#fff
, then the pseudo-element wouldn’t be visible.I did manage to make it work by setting non-negative
z-index
(or not setting it, defaults to 0) on the pseudo-element, which makes it go in front of any content, preventing any interaction. So I counteracted that by adding another rule likediv > * { z-index: 1; }
to lift all the other contents. However do note that the rule doesn’t work on text nodes (only works on elements), so you need to wrap any raw text into something like a<span>
or<div>
for it to be lifted.So it becomes like this: