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

CSS CSS Basics (2014) Enhancing the Design With CSS Border Radius

Julie Baer
Julie Baer
4,256 Points

Why is the box-shadow and border-radius is applied to the div with the class Wildlife, not the image, is that an option?

This is in reference to the section "Design with latest features" in the CSS Basics section.

2 Answers

I'm curious, why do you think they are applying styles to the div rather than the img itself? Remember the img is the background of the div. I think you are talking about the bear.jpeg.

Julie Baer
Julie Baer
4,256 Points

Hi Jacob, Thanks for responding to my question… in the css sheet, all of the work is done under .wildlife{ } rather than img{ }. Maybe if I go back and look at the whole style sheet it will make sense to me, I just thought maybe there was some best practice rule I don't understand yet.

It's cool, let's break it down. The reason I asked you why do you think they are using a div is because I wanted to know what you thought about it. What is your process for understanding the concepts in the video.

Okay, so in the case of the div .wildlife, Guil is using the img as a background, not a standalone element.

<div class="wildlife"> 
        <h2>Check out all the Wildlife</h2>
        <p>
          As spawning season approaches, the fish acquire a humpback and protuberant jaw. 
After spawning, they die and their carcasses provide a 
feast for gatherings of <a href="#mink">mink</a>, 
<a href="#bears">bears</a>, and <a href="#eagles">bald eagles</a>.
        </p>
      </div><!-- End .wildlife -->

okay, So let's take a look at the HTML, we can see that it's a div with text and a link.

.wildlife {
  color: white;
  text-align: left;
  padding: 18% 24%;
  border-top: 10px solid #ffa949;
  margin: 105px 0 60px;
  background: #434a52 url('../img/bear.jpg') no-repeat center; // here is the img
  background-size: cover;
  box-shadow: inset 0 0 50px 10px rgba(0,0,0, .8);
}

Now in the CSS Guil is using the bear.jpg as the background for that div. That way he can have that jpeg be the background of the div, have the h1 and p tags, and style that div the way he wants. You can style an img element like that as well but, you can not have text ie h1 or p tags nested inside an image tag.

A couple of things are going on, one, Guil wants the jpeg to be the background of the div .wildlife rather than a standalone element so he can have an h1 and p tags there. Second, the border-radius and box-shadow are applied to style that div.

I hope this helps. If you have any questions please fee free to ask.

Julie Baer
Julie Baer
4,256 Points

(this is in response to Jacob's answer - there were no comment boxes available)

Jacob - That makes total sense - thank you so much! He wasn't just styling the img, he was styling the div that contains the background, h1 and text. Thank you for explaining that so clearly and breaking it down with the code - I really appreciate your time! - Julie

exactly! Julie, not a problem, happy coding!