Css Background-Image-Opacity

CSS background-image-opacity?

If the background doesn't have to repeat, you can use the sprite technique (sliding-doors) where you put all the images with differing opacity into one (next to each other) and then just shift them around with background-position.

Or you could declare the same partially transparent background image more than once, if your target browser supports multiple backgrounds (Firefox 3.6+, Safari 1.0+, Chrome 1.3+, Opera 10.5+, Internet Explorer 9+). The opacity of those multiple images should add up, the more backgrounds you define.

This process of combining transparencies is called Alpha Blending and calculated as (thanks @IainFraser):

αᵣ = α₁ + α₂(1-α₁) where α ranges between 0 and 1.

Change background image opacity with css

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.

Background image opacity without affecting text

Follow this link How can i change background image opacity without changing on div content?

.content {  position: relative;}
.content::after { content: ""; background: url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg') left top no-repeat, url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg') right bottom no-repeat; opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
<div class="content">        <div class="box">            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>        </div></div>

Can I set an opacity only to the background image of a div?

Nope, this cannot be done since opacity affects the whole element including its content and there's no way to alter this behavior. You can work around this with the two following methods.

Secondary div

Add another div element to the container to hold the background. This is the most cross-browser friendly method and will work even on IE6.

HTML

<div class="myDiv">
<div class="bg"></div>
Hi there
</div>

CSS

.myDiv {
position: relative;
z-index: 1;
}

.myDiv .bg {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(test.jpg) center center;
opacity: .4;
width: 100%;
height: 100%;
}

See test case on jsFiddle

:before and ::before pseudo-element

Another trick is to use the CSS 2.1 :before or CSS 3 ::before pseudo-elements. :before pseudo-element is supported in IE from version 8, while the ::before pseudo-element is not supported at all. This will hopefully be rectified in version 10.

HTML

<div class="myDiv">
Hi there
</div>

CSS

.myDiv {
position: relative;
z-index: 1;
}

.myDiv:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(test.jpg) center center;
opacity: .4;
}

Additional notes

Due to the behavior of z-index you will have to set a z-index for the container as well as a negative z-index for the background image.

Test cases

See test case on jsFiddle:

  • Using CSS 2.1 :before
  • Using CSS 3 ::before

Change background image opacity

There is nothing called background opacity. Opacity is applied to the element, its contents and all its child elements. And this behavior cannot be changed just by overriding the opacity in child elements.

Child vs parent opacity has been a long standing issue and the most common fix for it is using rgba(r,g,b,alpha) background colors. But in this case, since it is a background-image, that solution won't work. One solution would be to generate the image as a PNG with the required opacity in the image itself. Another solution would be to take the child div out and make it absolutely positioned.

How to change only the background image opacity?

You could also do this by a pseudo element. Something like this:

section {
position: relative;
padding: 15px;
width: 100%;
height: 700px;
}

section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: .5;
background-image: url(../IMG/Photo_NR1.jpg);
}

So you do not need an image tag and you separating the design from content.



Related Topics



Leave a reply



Submit