Assigning Background Image to a Div Issue

Hi Chris,

The issue is that background-size: cover, ensures that your background image is the same size or GREATER than the containing element. So with some images, you will see exactly what you are seeing with your issue.

What you actually want is to ensure that your whole image is seen - so the image should be as large as it can be, but never exceed the containing elements height and width. That way your nice rounded corners will not be cut off.

To do that you would use background-size with the value "contain" instead of "cover"

So your code would look like this:

.hero {
  background: url('http://s4.postimg.org/qodjah8dp/banner_cat.png') no-repeat;
  width: 100%;
  height: 198px;
  background-size: contain;
  padding-left: 225px;
}

I hope this helps. Here is some documentation on MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#Special_values.3A_.22contain.22_and_.22cover.22

Luke DePass The issue with changing the background-size value to cover is it will cause the div image to shrink when you scale the browser window down. Here is a quick mock up I made comparing cover vs contain for background-size on the image.

The curious thing is on the live hosted site, the image is working exactly as I intend it too, yet the CSS code is the exact same and using background-size: cover. It shows enough of the image height to reveal the rounded corners as you can see here http://cssdojo.net/cat/

.header{
  background: url('../images/banner-cat.png') no-repeat;
  width: 100%;
  height: 198px;
  background-size: cover;
  padding-left: 225px;
}