totn CSS

CSS: background-position property

This CSS tutorial explains how to use the CSS property called background-position property with syntax and examples.

Description

The CSS background-position property defines the initial position of the background-image for an element.

Syntax

The syntax for the background-position CSS property is:

background-position: horizontal_value [vertical_value];

Parameters or Arguments

horizontal_value

Defines the horizontal position of the background-image. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...
div { background-image: url("logo.png"); background-position: 0px 10px; }
percentage Percentage value
div { background-image: url("logo.png"); background-position: 25% 50%; }
left Image is horizontally aligned to the left. Equivalent to 0% for the horizontal position
div { background-image: url("logo.png"); background-position: left top; }
center Image is horizontally centered. Equivalent to 50% for the horizontal position
div { background-image: url("logo.png"); background-position: center top; }
right Image is horizontally aligned to the right. Equivalent to 100% for the horizontal position
div { background-image: url("logo.png"); background-position: right top; }
inherit Element will inherit the background-position from its parent element
div { background-image: url("logo.png"); background-position: inherit; }
vertical_value

Optional. It defines the vertical position of the background-image. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...
div { background-image: url("logo.png"); background-position: 25px 30px; }
percentage Percentage value
div { background-image: url("logo.png"); background-position: 10% 25%; }
top Image is vertically aligned to the top. Equivalent to 0% for the vertical position
div { background-image: url("logo.png"); background-position: left top; }
center Image is vertically centered. Equivalent to 50% for the vertical position
div { background-image: url("logo.png"); background-position: left center; }
bottom Image is vertically aligned to the bottom. Equivalent to 100% for the vertical position
div { background-image: url("logo.png"); background-position: left bottom; }
inherit Element will inherit the background-position from its parent element
div { background-image: url("logo.png"); background-position: inherit; }

Note

  • The first value represents the horizontal position of the background-image and the second value represents the vertical position of the background-image.
  • If no vertical_value is provided, the CSS background-position property will assume that the vertical_value is center.

Browser Compatibility

The CSS background-position property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE)
  • Opera
  • Safari (WebKit)

Example

We will discuss the background-position property below, exploring examples of how to use this property in CSS.

Using Fixed

Let's look at a CSS background-position example where we use a fixed value.

div { background-image: url("/images/logo.png"); 
      background-position: 0px 45px; }

In this CSS background-position example, we have set a background-image for the <div> tag using the logo.png file. Then we have set the image to be horizontally positioned at 0px and vertically positioned at 45px.

It is also wise when setting a background-image to also set a background-color, in case the image is not available. Let's modify our example to add a background-color of black.

div { background-color: black; 
      background-image: url("/images/logo.png"); 
      background-position: 0px 45px; }

Now if the logo.png image is not available, the <div> will still display a black background-color.

Using Percentage

Let's look at a CSS background-position example where we use a percentage value.

div { background-color: white;
      background-image: url("/images/logo2.png");
      background-position: 50% 50%; }

In this CSS background-position example, we have set a background-image for the <div> tag using the logo2.png file. Then we have set the image to be horizontally positioned at 50% (ie: centered) and vertically positioned at 50% (ie: centered). If the logo2.png image is not available, the <div> will still display a white background-color.

Using Keyword

Let's look at a CSS background-position example where we use a keyword value (ie: center, top, bottom, left, right).

div { background-color: blue;
      background-image: url("/images/logo3.png");
      background-position: left top; }

In this CSS background-position example, we have set a background-image for the <div> tag using the logo3.png file. Then we have set the image to be horizontally left-aligned and vertically top-aligned. If the logo3.png image is not available, the <div> will still display a blue background-color.

Share on: