Change background image opacity with css

Question

I want to change header's background image opacity with css. Could you help me please.

.intro {
  display: table;
  width: 100%;
  height: auto;
  padding: 100px 0;
  text-align: center;
  color: #fff;
  background: url(http://lorempixel.com/1910/500/nature/) no-repeat bottom center scroll;
  background-color: #000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

<header class="intro">
  ...
</header>

Four upvotes for something you can google in a minute? Not very compliant with OP's user name. — Shikkediel
– Shikkediel, Commented Oct 10, 2015 at 7:30
In modern browsers, you can also make use of CSS3's filter: developer.mozilla.org/en-US/docs/Web/CSS/filter — connexo
– connexo, Commented Oct 10, 2015 at 8:35

salmanxk · Accepted Answer · 2015-10-10 07:27:02Z

An alternative would be that you convert this background image file to the .PNG format and make the original image 0.2 opacity using a photo editing program but if you insist on using CSS, you can use the method below:

Since CSS does not directly support background image opacity, you can try using a pseudo-class to overlay another on your header and set opacity on it. Something along the lines of this should help:

<header class="intro">
...
</header>

.intro {
    position: relative;
    background: #5C97FF;
    overflow: hidden;
}
/* You could use :after - it doesn't really matter */
.intro:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
    background-image: url('../img/bg.jpg');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

Zain Farooq · Accepted Answer · 2015-10-10 07:27:24Z

5

HTML code

<header class="intro">
<img class="IntroImg" src="../img/bg.jpg">
</header>

CSS code

.intro introIimg:hover {
opacity: 1.0;//Set your opacity
...

}

Hope it will help you.

answered Oct 10, 2015 at 7:27

Zain Farooq

2,9664 gold badges23 silver badges49 bronze badges

Comments

Paran0a · Accepted Answer · 2015-10-10 07:19:17Z

4

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.

answered Oct 10, 2015 at 7:19

Paran0a

3,4653 gold badges27 silver badges48 bronze badges

4 Comments

EducateYourself Over a year ago

Thank you very much for your help! Now I want to do the same for another div but it seems I do something wrong. Could you help me please. .download-section { width: 100%; padding: 50px 0; color: #fff; background: url(../img/bg.jpg) no-repeat center center scroll; background-color: #000; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }

Paran0a Over a year ago

Can you post a jsfiddle with what you have currently? the process should be the same for other elements. But I will look into it if you give full example.

Paran0a Over a year ago

I'm sorry but did you even look what I did? I just repeated my step and it works fine. Are you trolling maybe? jsfiddle.net/292zxcqw/1

EducateYourself Over a year ago

Thank you very much for your help! There was smth wrong in my code.

om_jaipur · Accepted Answer · 2016-05-25 12:54:16Z

4

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.

.intro {
	position: relative;
	z-index: 0;
	display: table;
	width: 100%;
	height: auto;
	padding: 100px 0;
	text-align: center;
	color: #fff;
	background-color: #000;
}

.intro:after {
	content : "";
	width: 100%;
	height: 100%;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	opacity : 0.2;
	z-index: -1;
	background: url(https://t1.ftcdn.net/jpg/00/81/10/58/240_F_81105881_pmBwtzXqFmtFx6rfhujAqTnhpWZf8fXn.jpg) no-repeat bottom center scroll;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}

<header class="intro">
  ...
</header>

See the link here

edited May 25, 2016 at 12:54

answered Oct 10, 2015 at 7:14

om_jaipur

2,1945 gold badges31 silver badges54 bronze badges

1 Comment

Paulie_D Over a year ago

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes

Collectives™ on Stack Overflow

Change background image opacity with css

4 Answers 4

Comments

Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related