From the course: CSS: Images

Unlock this course with a free trial

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

Position background image within a container

Position background image within a container

From the course: CSS: Images

Start my 1-month free trial Buy for my team

Position background image within a container

“

- [Instructor] You can position the background image within the context of its containing element using the background-position property. Let me show you how that works. So I'll select the image here. And I'll add a new selector just to make it easier to see what's going on. And I'll say background-position. The background-position property can now take either one or two of the predefined keywords: bottom, center, left, right, and so on. Or you can put in numerical values for both the x-axis and the y-axis. So let's see what happens when I set background-position to bottom. Here, the bottom edge of the background image is aligned with the bottom edge of the containing box. Same thing happens with center. Now the image is centered in the box. Left aligns the left-hand edge with the left-hand edge, right, the right-hand edge with the right-hand edge, and top, which is the default, aligns the top edge of the image…

Contents