Search⌘ K

How to Position Backgrounds in CSS

Explore how to position background images in CSS using keywords like top and left, length values such as pixels and ems, and percentage values to control placement relative to container and image size. This lesson helps you understand the different methods and apply them in practical styling scenarios for your web projects.

Positioning Backgrounds with Keywords.

Backgrounds may be positioned with the combination of the keywords: top, left, bottom, right, and center

Example


  background-position: top left
  

The best way to see this at work is to use the playground below:

Change the background-position value to use a combination of the keywords discussed. ...