Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Darren Healy
Front End Web Development Techdegree Student 23,565 PointsTrouble using CSS to apply shading over image
Hi there,
I'm having some trouble applying a slightly transparent dark tint over an image.
Essentially I want to apply (I think) a gradient as a background to the containing div, then make the image z-index: -1; so it moves behind this div and the end result is the slightly transparent background overlaying the image.
To see an example of what I'm looking for follow the link and look at the difference in the running shoes (the first example) https://css-tricks.com/design-considerations-text-images/
I've isolated the HTML where I'm trying to achieve this:
<div class="row">
<div class="col-md-6 lead-div dark-background">
<img src="assets/img/lunch.jpg">
<h3 class="text-on-image full">Eat</h3>
</div>
<div class="col-md-6 lead-div">
<ul class="lead-list">
<li class="lead-list-half"><img src="assets/img/coffee-latte.jpeg"><h3 class="text-on-image half-top">Drink</h3></li><li class="lead-list-half"><img src="assets/img/dessert-rockyroad.jpeg"><h3 class="text-on-image half-top">Treat</h3></li><li class="lead-list-half"><img src="assets/img/ice-cream.jpeg"><h3 class="text-on-image half-bottom">Ice-Cream</h3></li><li class="lead-list-half"><img src="assets/img/dining.jpeg"><h3 class="text-on-image half-bottom">Dine</h3></li>
</ul>
</div>
</div>
And most of my CSS declarations:
.body {
font-family: ;
font-size: 1em;
}
ul {
list-style-type: none;
padding: 0;
}
a:hover {
text-decoration: none;
}
img {
display: block;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
}
.navbar {
margin-bottom: 0;
background-color: #1B381C;
height: 100px;
}
.navbar .nav li a {
color: #FFF;
}
.navbar .nav li a:hover {
color: #338435;
}
.lead-button {
margin-top: 30px;
margin-right: 5px;
margin-left: 5px;
display: inline-block;
padding: 10px 25px;
border: 2px solid white;
color: white;
font-size: 1.3em;
text-align: center;
background-color: #1E4535;
}
.row-awards {
background-color: #F9F9F9;
}
.top-row-shadow {
box-shadow: 0 -5px 5px -5px #333;
}
.bottom-row-shadow {
box-shadow: 0 5px 5px -5px #333;
}
.dark-background {
background-image: linear-gradient(rgba(0, 0, 0, 1),rgba(0, 0, 0, 1));
}
.darken-image img {
z-index: -1;
}
.lead-div {
padding: 0;
}
ul.lead-list {
padding: 0;
line-height: 0;
}
.lead-list-half {
width: 50%;
display: inline-block;
}
.text-on-image {
position: absolute;
height: 100%;
text-align: center;
display: table;
z-index: 20;
margin: 0;
padding: 0;
color: #FFF;
border: 2px solid #FFF;
}
.full {
top: 50%;
bottom: 0;
width: 100%;
}
.half-top {
top: 25%;
bottom: 0;
width: 50%;
}
.half-bottom {
top: 75%;
bottom: 0;
width: 50%;
}
I think I'm on the right path but I can't quite think how to finish it.
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsOk, that makes more sense.
I think your only issue is in the following:
.darken-image img {
z-index: -1;
}
I think the class name is supposed to be .dark-background and you have to give the img a positioning context so that z-index will take effect. z-index will be ignored unless position is set to relative, absolute, or fixed.
.dark-background img {
position: relative;
z-index: -1;
}
Also, you don't have to use a gradient here. background-color would work perfectly fine. The reason it needed to be used in that link is because the images were css background images. Background colors always show up underneath background images. They get around that problem by layering multiple background images and putting the gradient on the top layer.
You don't have that problem because your image is in the html. Therefore, you can use background or background-color.
In case the above change doesn't get it working for you, I created a demo that shows the basic html and css needed for this effect. You can try comparing to see what might be different.
https://codepen.io/anon/pen/LGmZOz
<div>
<img src="http://www.placehold.it/150x200" alt="" />
<h3>The caption</h3>
</div>
div {
width: 150px;
position: relative;
background: rgba(0, 15, 200, .5);
}
img {
display: block;
position: relative;
z-index: -1;
}
h3 {
position: absolute;
color: white;
bottom: 0;
}
Darren Healy
Front End Web Development Techdegree Student 23,565 PointsI see, thanks for the help. One bit of theory I missed really - the positioning context - I will remember that in future! I went with solution b as you suggested, thanks Jason Anello
Darren Healy
Front End Web Development Techdegree Student 23,565 PointsJason Anello Sure, take a look at this link: https://css-tricks.com/design-considerations-text-images/
You can see the difference with the running shoes - normal image - then a darker tint is applied.
However in my case I haven't used background images because of the specific CSS layout I wanted to achieve. But I want the same effect.
Does this make more sense?
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Darren,
It would help to troubleshoot if you could specify what it's currently looking like and what needs to be fixed.
Is the h3 supposed to be on top of the div background but the image is behind it? Or is the background only supposed to be over the image and not seen outside of that?