Darkening the background image on a stormy carus
Hello, I am having trouble formatting my images so that they are darker in order to read the text on them. I am using bootstrap carousel theme and cannot get images dark! Opacity works, but it makes the text more transparent. As far as I know, linear-gradient
should work, but nothing happens. I've tried this on all classes (not just the image class slide).
.slide {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="slide" src="http://placehold.it/800x300" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Welcome to GroupWrites.</h1>
<p>Where creative writing meets social media. Discover our community of writers and readers and experience social writing. </p>
<p><a class="btn btn-lg btn-primary" href="/register" role="button">Sign up today</a></p>
</div>
</div>
</div>
</div>
I know this is something simple, probably what I observe, as always. Any help would be greatly appreciated.
source to share
You try to install background
on <img>
, but it doesn't work because it background-image
overlaps background-color
. So you can use :after
or :before
to create a new overlay.
See the following solution:
.item:after {
content:"";
display:block;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.6);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="slide" src="http://placehold.it/800x300" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Welcome to GroupWrites.</h1>
<p>Where creative writing meets social media. Discover our community of writers and readers and experience social writing. </p>
<p><a class="btn btn-lg btn-primary" href="/register" role="button">Sign up today</a></p>
</div>
</div>
</div>
You can use this solution using class .item
or .carousel-inner
.
source to share
Setting background-image
to on img
won't work because of course the background image is in the background! This covered the actual image.
What you need to do is overlay a semi-transparent background over your image. You can do this by setting the background
parent image div
and ensuring that it is higher z-index
than the image itself.
.item {
width: 400px;
height: 300px;
}
.item.active {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));
}
.item .slide {
position: relative;
z-index: -1;
width: 400px;
height: 300px;
}
<div class="item">
<img class="slide" src="http://placehold.it/400x300" alt="First slide">
</div>
<div class="item active">
<img class="slide" src="http://placehold.it/400x300" alt="First slide">
</div>
source to share
you need to add this to your CSS
.carousel-caption{
width:100%;
height:100%;
left:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.2);
}
Here is a JSfiddle link for practical implementation. https://jsfiddle.net/ghayyourspyko/tc0ksnex/1/
Another way to do it as it should
.item{
Position:relative;
}
.item:after {
content:"";
display:block;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.6);
}
JsFiddle link for practical implementation of this below. https://jsfiddle.net/ghayyourspyko/jscgdLdu/1/
source to share