Using the background property in CSS to set image size

1. Preface

Background https://coder-cafe.com/wp-content/uploads/2025/09/images are a common element in web design and development. To adapt background https://coder-cafe.com/wp-content/uploads/2025/09/images to different screen sizes and device types, we need to learn how to set their dimensions. This article details how to use the CSS background property to set background image dimensions, and provides some sample code to demonstrate different scenarios.

2. background-size Property

CSS The background-size property is used to set the size of the background image. It accepts multiple values, separated by spaces. Commonly used values ​​are:

• auto: Default value, maintains the image’s original size.
• contain: Completely encloses the image within the container, potentially leaving some white space.
• cover: Fills the entire container, potentially cropping the image.
• <length>: Specifies the image’s dimensions using a specific length.
• <percentage>: Specifies the image’s dimensions using a percentage.

Here’s a sample code example showing how to use the background-size property to set the background image’s dimensions to 200 pixels wide and 300 pixels high:

div {
background-size: 200px 300px;
} 

3. background-repeat Property

The CSS background-repeat property is used to set the background image’s repeating pattern. It accepts multiple values, separated by commas. Common values ​​are:

• repeat: The default value, which causes the background image to tile both horizontally and vertically.
• repeat-x: The background image will tile only horizontally.
• repeat-y: The background image tiles only vertically.
• no-repeat: The background image does not tile and is displayed only once.

The following code example shows how to use the background-repeat property to set the background image to tile only horizontally:

div {
background-repeat: repeat-x;
}

4. background-position Property

The CSS background-position property is used to set the starting position of the background image. It accepts multiple values, separated by spaces. Common values ​​are:

• <position>: Specifies the starting position of the background image using a specific position value.
• <percentage>: Specifies the starting position of the background image using a percentage value.
• top: Centers the background image at the top of the container.
• right: Centers the background image at the right of the container.
• bottom: Centers the background image at the bottom of the container.
• left: Centers the background image at the left of the container.
• center: Centers the background image horizontally and vertically within the container.

The following code example shows how to use the background-position property to center a background image in the top-right corner of a container:

div {
background-position: right top;
} 

5. background-origin Property

The CSS background-origin property sets the starting position of a background image relative to its container. It accepts multiple values, separated by spaces. Commonly used values ​​are:

• padding-box: The starting position of the background image is relative to the container’s padding.
• border-box: The background image’s starting position is relative to the container’s border.
• content-box: The background image’s starting position is relative to the container’s content area.

The following code example shows how to use the background-origin property to set the background image’s starting position relative to the container’s border:

div {
background-origin: border-box; 
} 

6. background-attachment Property

The CSS background-attachment property is used to set whether a background image is fixed (does not move with scrolling). It accepts multiple values, separated by commas. Common values ​​are:

• scroll: The default value. The background image moves with scrolling.
• fixed: The background image is fixed within the container and does not move with scrolling.
• local: The background image is fixed within the container’s content area and does not move with scrolling.

The following is a sample code that shows how to use the background-attachment property to set a background image to be fixed within the container:

div {
background-attachment: fixed;
}

7. Sample Code

The following is a sample code that combines the above properties to show how to set the size, repeat mode, starting position, the starting position relative to the container, and whether the background image is fixed within the container:

div {
background-image: url('example.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-origin: padding-box;
background-attachment: fixed; 
} 

In this example, the background image is sized to fill the container as much as possible and is cropped. The image’s initial position is centered and positioned relative to the container’s padding. Furthermore, the image is fixed within the container and does not move with scrolling.

8. Summary

This article detailed how to use the CSS background property to set the size of background https://coder-cafe.com/wp-content/uploads/2025/09/images. We learned how to use the background-size, background-repeat, background-position, background-origin, and background-attachment properties, and demonstrated different scenarios with example code. With this knowledge, you’ll be able to flexibly set the size of background https://coder-cafe.com/wp-content/uploads/2025/09/images to adapt to a variety of screen sizes and device types.