Set Background image opacity CSS

Question

How to set background image opacity using CSS, I want to set opacity only for background image not for every element in a div.

for an example if I use this code it's apply for every element in the div,

.myclass {
-khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

I want set opacity only for the background image, can all please help me

Set background image with opacity: http://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity — Arbaoui Mehdi, Jul 30 '13 at 10:29

score 3 · Answer 1 · edited May 23 '17 at 12:30

3

CSS does not support setting opacity separately for a background image. You need to modify the image itself to a semitransparent PNG with proper alpha channel information.

With CSS3 pseudo-elements you can hack it, but that's not really 'pretty', and it's no longer a real background, affecting sizing options and such.

edited May 23 '17 at 12:30

Community

1
1

answered Jul 30 '13 at 10:27

Niels Keurentjes

41,402
9
98
136

Wood · Answer 2 · 2013-07-30T11:19:23.457

Solution with 1 div and NO transparent image:

You can use the multibackground CSS3 feature and put two backgrounds: one with the image, another with a transparent panel over it (cause I think there's no way to set directly the opacity of the background image):

background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

You can't use rgba(255,255,255,0.5) because alone it is only accepted on the back, so I've used generated gradients for each browser for this example (that's why it is so long). But the concept is the following:

background: tranparentColor, url("myImage");

http://jsfiddle.net/pBVsD/1/

Ayush · Answer 3 · 2013-07-30T10:57:36.857

1

Just add the image in <div> set opacity and position: absolute note it should be of same height and width. have a look at this

demo

edited Jul 30 '13 at 10:57

answered Jul 30 '13 at 10:32

Ayush

3,989
1
26
34

score 0 · Answer 4 · answered Jul 30 '13 at 10:36

0

The best way is to have a that is position: absolute before .myclass and the same height as .myclass, then apply the background image and opacity: 0.5; filter: alpha(opacity=50);

answered Jul 30 '13 at 10:36

user2618352

114
1

score 0 · Answer 5 · edited Jun 26 '19 at 09:08

I used the following function and it works very well. filter:alpha(opacity=x). The x can take a value between 0 and 100. As the value gets larger the transparency grows, you can use it in the hover property of the element.

Here is an example:

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

Set Background image opacity CSS

5 Answers5