Background Positioning

2.1 The background-position Property

The background-position property in CSS is used to set the starting position of a background image in an element. This property allows you to precisely define where the background image will be placed inside an element. background-position can be used for fine-tuning the appearance of background images and creating more complex designs.

Syntax of background-position

The background-position property takes two values that specify the background image's horizontal and vertical positions:

    
      background-position: horizontal-position vertical-position;
    
  

If only one value is specified, the second value defaults to center.

Possible values for horizontal and vertical position:

• Keywords:
  • left: aligns to the left edge
  • center: centers the image
  • right: aligns to the right edge
  • top: aligns to the top edge
  • bottom: aligns to the bottom edge
• Percentage values:
  • For example, 50% 50% centers the image
  • Percentage values refer to the size of the element, not the image
• Pixel values:
  • For example, 10px 20px positions the image 10 pixels from the left and 20 pixels from the top
• Combination of values:
  • You can combine keywords and percentage values, e.g., left 50%

2.2 Keywords

Keywords:

• left, center, right: horizontal alignment
• top, center, bottom: vertical alignment

Examples of using keywords

Image is positioned in the top left corner:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left top;  /* Image is positioned in the top left corner */
      }
    
  

Image is centered:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: center center;  /* Image is centered */
      }
    
  

Image is positioned in the bottom right corner:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: right bottom;  /* Image is positioned in the bottom right corner */
      }
    
  

2.3 Percentages

Percentage values specify the image's position relative to the element's dimensions.

Examples of using percentages

Image is centered:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 50% 50%;  /* Image is centered */
      }
    
  

Image is positioned in the top left corner:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 0% 0%;  /* Image is positioned in the top left corner */
      }
    
  

Image is positioned in the bottom right corner:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 100% 100%;  /* Image is positioned in the bottom right corner */
      }
    
  

2.4 Absolute Units (px, em, rem)

Pixel or other absolute unit values allow precise positioning of the image.

Image is centered:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 10px 20px;  /* Image is positioned 10 pixels to the right and 20 pixels down from the top left corner */
      }

      div {
        background-image: url('path/to/image.jpg');
        background-position: 2em 3em;  /* Image is positioned 2em to the right and 3em down */
      }
    
  

2.5 Combining Values

You can combine keywords and absolute units to create more precise positioning.

Combining values:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left 20px top 10px;  /* Image is positioned 20 pixels to the right and 10 pixels down from the top left corner */
      }
    
  

1

Task

Frontend SELF EN, level 18, lesson 2

Locked

Background Position

Background Position

Open

1

Task

Frontend SELF EN, level 18, lesson 2

Locked

Background Position (Pixels)

Background Position (Pixels)

Open