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
How to Change Bootstrap 3 Column Order on Mobile Layout
Is ≪Img≫ Element Block Level or Inline Level
Freeze the Top Row For an HTML Table Only (Fixed Table Header Scrolling)
What Is the Correct Value For the Disabled Attribute
Using Sections in Editor/Display Templates
Center a Div Horizontally and Vertically
How to Target a Specific Column or Row in CSS Grid Layout
Open Link in New Tab or Window
Draw on Html5 Canvas Using a Mouse
Using HTML and Local Images Within Uiwebview
Make Absolute Positioned Div Expand Parent Div Height
Html Parsing of Cricinfo Scorecards
How to Assign Multiple Classes to an HTML Container