Understand CSS Background Position with 4 Simple Examples

What Is the CSS Background Position Property?

The CSS background position property allows you to position a background image at any position within an element. This property helps create attractive web designs by allowing you to control exactly where a background image is positioned.

The CSS background position property is particularly useful when designing responsive websites. It allows you to adjust the positioning of background images based on the size of the viewport, ensuring that your design remains visually appealing and functional across a variety of screen sizes.

The background-position property in CSS accepts both percentage and length values, as well as keyword values like “top,” “center,” and “bottom.” You can achieve a wide range of positioning effects by combining these values in different ways.

This is part of a series of articles about CSS Image

In this article:

• Importance of Controlling Background Image Position
  • Enhanced Visual Appeal
  • Responsive Design Considerations
  • Effective Use of Image Sprites
• Understanding the Background Position Property
  • Two-value vs. Four-value Syntax
• Examples of the CSS Background Position Property
• • Length Values Example
  • Percentages Example
  • Keywords Example
  • Four-Value Syntax Example

Importance of Controlling Background Image Position

Controlling the position of a background image is crucial for creating visually appealing and responsive designs. Properly positioned background images can enhance the user experience by ensuring key elements are always in view and maintaining the site’s overall aesthetic. Here are some key reasons why mastering background image positioning is essential:

Enhanced Visual Appeal

Controlling the background image position can significantly enhance the visual appeal of your web design. By strategically positioning your background images, you can draw attention to key elements of your design, create engaging visual patterns, and even guide your users’ eyes around the page. This can make your design more engaging and visually appealing.

Responsive Design Considerations

The background position property plays a crucial role in responsive design. It ensures that your background images always look their best, regardless of your user’s device or screen size. You can specify different background property values for different devices or screen sizes; one way to do this is via media queries.

Learn more in our detailed guide to responsive image techniques

Effective Use of Image Sprites

Image sprites are a technique for combining multiple images into a single image file, which can significantly reduce the number of HTTP requests your site makes and improve page load times. By using background-position, you can control which part of the sprite is visible within an element, allowing you to display different images from the sprite in other parts of your design.

Using the Background Position Property

The syntax for the CSS background position property is relatively straightforward. The property accepts one or two values, which specify the position of the background image along the x-axis (horizontal) and y-axis (vertical), respectively, like this:

 	background-position: 50px 100px;

These values can be specified as percentages, lengths, or keywords. There are nine possible keywords: top, bottom, left, right, center, top left, top right, bottom left, and bottom right. These keywords allow you to position the background image relative to the edges of the element.

Two-value vs. Four-value Syntax

The CSS background position property can be specified using a two or four-value syntax. The two-value syntax, shown above, is simpler and more commonly used. It allows you to determine the horizontal and vertical positions of the background image using two values.

The four-value syntax looks like this:

background-position: right 20px bottom 10px;

This provides more control over the positioning of the background image. It allows you to specify the position of the background image relative to any corner of the element, as well as the offset from that corner. This makes it possible to position the background image at any point within the element.

Examples of the CSS Background Position Property

The CSS background-position property works with other CSS properties like background-image and background-repeat. Let’s look at examples of each of these. If you want to follow along with the same image, you can download image.jpg here.

Length Values Example

You can use this property with length values. These can be in pixels, ems, or CSS length measurements. The first value specifies the horizontal position, and the second specifies the vertical position.

body {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: 50px 100px;
}

In this example, the background image.jpg is positioned 50 pixels from the left and 100 pixels from the top of the body element. This is useful when you want to position a background image at a specific distance from an element’s top, right, bottom, or left edges.

Percentages Example

Like length values, the first percentage refers to the horizontal position, and the second refers to the vertical position.

body {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: 50% 25%;
}

In this example, the background image.jpg is positioned at 50% from the left and 25% from the top of the body element. This means that the point in the image that is 50% across and 25% down is placed at the point in the element that is 50% across and 25% down.

Keywords Example

Here is an example showing the use of keywords to position the background relative to the edges of the element:

body {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: top right;
}

In this example, the background image.jpg is positioned at the top right of the body element. This is a simple and straightforward way to position a background image, especially if you want it aligned with the edges of an element.

Four-Value Syntax Example

The four-value syntax allows you to position a background image away from a certain edge using a length or percentage.

body {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: right 20px bottom 10px;
}

Assuming you have a paragraph element <p>, using the above CSS, the background image will be placed 20px from the right margin, and it will be placed 10px below the height of <p> element.

Related content: Read our guide to CSS image effect

Generating Responsive Image Backgrounds With Cloudinary

A cloud-based Image and Video API, Cloudinary offers a generous free-forever subscription plan. While on that platform, you can upload images and apply built-in effects, filters, and modifications. You can also create image effects that are difficult or impossible to produce with just CSS.

Cloudinary makes it simple to deliver responsive images by:

• • Dynamically transform images — Generates transformed (e.g., resized or cropped) versions of images on the fly with Cloudinary dynamic URLs. This capability is especially useful with the HTML srcset attribute and <picture> element, enabling the browser to choose which image version to display.
  • Automating responsive images with JavaScript front-end frameworks (client side) — Programmatically sets the <img> src URL to a Cloudinary dynamic URL that delivers the optimal image for the available image width.
  • Automating responsive images with the cloudinary-core JS library (client side) — Programmatically sets the <img> src URL to a Cloudinary dynamic URL that delivers the optimal image for the available image width and the device’s DPR.
  • Automating responsive images with Client Hints (mobile Chrome only) — Delivers the optimal image for the available width and the device’s DPR as specified in the Client Hints request header.
  • Combining responsive automation with other Cloudinary features — Implements advanced RWD and art-directed, responsive images by leveraging Cloudinary’s other automation features.