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.
Advertisements