From the course: CSS: Images

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Fitting background images to any container

Fitting background images to any container

From the course: CSS: Images

Start my 1-month free trial Buy for my team

Fitting background images to any container

“

- [Instructor] Background images have their own set of CSS properties. You can use to control sizing, position, and many other features. If you go to the MDN Web Docs, you'll get a full breakdown of all of these properties and what they do. In this movie and the next one, I'll cover some of the basics of this and the features you're most likely to use. In this example, I've added a background image to the container you see here. I've used the background-image property to do so to specify this is just the background image. And when you add a background image, it is automatically added in its full size. So what you're seeing here is actually just a top left corner of the whole background image. It is scaled to its full size, and then it's cropped by the container. If I want to resize this background image to make it fit within the container, I used a background-size property. Background-size has two familiar settings…

Contents