CSS background-position

The background-position property in CSS allows you to specify the position of a background image within its containing element. By using this property, you can control how the background image is placed both horizontally and vertically.

The background-position property can take different values, including keywords like top, bottom, left, right, and center, as well as pixel or percentage values to specify an exact position.

Let's see some examples of how the background-position property works:


    .example {
      background-image: url('example.jpg');
      background-repeat: no-repeat;
      background-position: top right;
      height: 200px;
      width: 400px;
    }

Result:

In the example above, the background image is positioned at the top right corner of the container element.


    .example {
      background-image: url('example.jpg');
      background-repeat: no-repeat;
      background-position: center center;
      height: 200px;
      width: 400px;
    }

Result:

In this example, the background image is positioned at the center both horizontally and vertically within the container element.

Experiment with different values for the background-position property to achieve the desired placement of background images on your web page.