CODEWITHSUNDEEP
htmlcss
EducateYourself
EducateYourself

Reputation: 979

Change background image opacity with css

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>

Upvotes: 8

Views: 3348

Answers (4)

om_jaipur
om_jaipur

Reputation: 2196

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

Upvotes: 4

Zain Farooq
Zain Farooq

Reputation: 2964

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.

Upvotes: 5

salmanxk
salmanxk

Reputation: 315

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

Upvotes: 6

Paran0a
Paran0a

Reputation: 3447

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.

Upvotes: 4

Related Questions