How to Use CSS background-size and background-position

Master the skills of CSS background image size and position to easily create responsive layouts! This article will explore the background-size and background-position properties in depth to help you flexibly control the size and position of background images.

Core points:

The
• background-size attribute is used to adjust the background image size, supports keywords such as cover and contain, as well as numerical units such as pixels, em, and percentages.
The
• background-position attribute controls the position of the background image in the container, and works best with background-size: cover.
• background-position You can use keywords (top, bottom, left, right, center), length value (px, em) or percentage value to achieve accurate image positioning.
The combination of
• background-size and background-position is especially suitable for responsive layouts to deal with container size changes.

Practical exercise:

We will use the pictures of Oia, Santorini (400px x 600px) for the demonstration.

In our example, a 300px x 200px <div> is centered. <code><div>Have a yellow background, the background image is above the yellow background. <p>If you add the background image directly, only part of the image will be displayed because the image size is larger than <code><div>. <p><img src="https://img.php.cn/upload/article/000/000/000/173906287235522.jpg" alt="How to Use CSS background-size and background-position "></p> The <p><code>background-size attribute will help us solve this problem.

Use background-sizeSet background size:

The

background-size attribute provides two keywords cover and contain, as well as numerical units (px, em, %) and auto.

• background-size: contain;: The image is displayed in full, but may not be filled with the container.

• background-size: cover;: The image is full of containers, but some images may be cropped.

  

• Other values: Use percentage or pixel values ​​to set the image size, but be careful to avoid image deformation.

Use background-positionSet the background image position:

By default, the upper left corner of the background image is located in the upper left corner of the container. The background-position attribute allows us to accurately control the image position.

• Keywords: Use keyword combinations and positioning using top, bottom, left, right and other keywords. center

• Length value: Use pixels, em and other length values ​​to fine-tune the image position.

• Percent value: Use percentage value to position, you need to understand its proportional relationship relative to the container.

  

Summary:

and background-size properties are powerful tools in CSS, especially useful when creating responsive layouts. Flexible use of these two attributes can easily achieve various background image effects. background-position

For more details, please refer to the MDN documentation:

and background-size. In addition, it is recommended to learn the background-position and object-fit properties, which are also suitable for inline images. object-position

FAQs:

How to locate the background image to the bottom right corner of the page? Use
• . background-position: bottom right;
Can the background image be positioned using percentage? Yes,
• accepts percentage values. background-position
How to make the background image cover the entire element? Use
• . background-size: cover; The difference between
• and background-size: cover;? background-size: contain;Fill the container, coverFull the full display. contain
Does CSS support multiple background images? Supported, separated by commas.

I hope this article can help you better understand and apply the CSS background image size and position properties!