CSS: background property
This CSS tutorial explains how to use the CSS property called background with syntax and examples.
Description
The CSS background property defines the initial position of the background-image for an element. It is a shorthand property for setting the background-color, background-image, background-repeat, background-attachment, and background-position CSS properties.
Syntax
The syntax for the CSS background property is:
background: background-color background-image background-repeat
background-attachment
background-position-horizontal
[background-position-vertical];Parameters or Arguments
background-color is the background color of the element. It can be one of the following:
| Value | Description |
|---|---|
| #RRGGBB | Hexadecimal representation of the background color div { background: #FF0000; } |
| rgb() | RGB representation of the background color div { background: rgb(255,0,0); } |
| color name | Name of the background color (ie: red, blue, black, white) div { background: red; } |
| transparent | Indicates that the element shows the background-color of the element behind it. The default value for CSS background-color is transparent. div { background: transparent; } |
background-image is the background image for the element. It can be one of the following:
| Value | Description |
|---|---|
| url | Location of the image resource div { background: url("/images/logo.png"); } |
| none | No text-decoration is applied to the text div { background: none; } |
background-repeat defines whether the background-image repeats. It can be one of the following:
| Value | Description |
|---|---|
| repeat | Image is repeated both horizontally and vertically div { background: url("logo.png") repeat; } |
| repeat-x | Image is repeated horizontally div { background: url("logo.png") repeat-x; } |
| repeat-y | Image is repeated vertically div { background: url("logo.png") repeat-y; } |
| no-repeat | Image is not repeated div { background: url("logo.png") no-repeat; } |
| round | Image is repeated as many times as will fit. Images are rescaled if an exact fit is not achieved div { background: url("logo.png") round; } |
| space | Image is repeated as many times as can fully fit. White space between images is displayed if an exact fit is not achieved div { background: url("logo.png") space; } |
background-attachment defines whether the background-image scrolls. It can be one of the following:
| Value | Description |
|---|---|
| scroll | Image will scroll along with its containing block div { background: url("logo.png") scroll; } |
| fixed | Image is fixed within the viewport and does not scroll along with its containing block div { background: url("logo.png") fixed; } |
background-position-horizontal 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: url("logo.png") 0px 10px; } |
| percentage | Percentage value div { background: url("logo.png") 25% 50%; } |
| left | Image is horizontally aligned to the left. Equivalent to 0% for the horizontal position div { background: url("logo.png") left top; } |
| center | Image is horizontally centered. Equivalent to 50% for the horizontal position div { background: url("logo.png") center top; } |
| right | Image is horizontally aligned to the right. Equivalent to 100% for the horizontal position div { background: url("logo.png") right top; } |
background-position-vertical is 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: url("logo.png") 25px 30px; } |
| percentage | Percentage value div { background: url("logo.png") 10% 25%; } |
| top | Image is vertically aligned to the top. Equivalent to 0% for the vertical position div { background: url("logo.png") left top; } |
| center | Image is vertically centered. Equivalent to 50% for the vertical position div { background: url("logo.png") left center; } |
| bottom | Image is vertically aligned to the bottom. Equivalent to 100% for the vertical position div { background: url("logo.png") left bottom; } |
Note
- You can enter the values for the CSS background property in any order.
- If you set a value for background-image, it is recommended that you also set a background-color value in case the image is not available.
- If a background-position-horizontal value is provided but no background-position-vertical value is provided, the background-position-vertical will default to center.
- Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.
Browser Compatibility
The CSS background property has basic support with the following browsers:
- Chrome
- Firefox (Gecko)
- Internet Explorer (IE)
- Opera
- Safari (WebKit)
Example
We will discuss the background property below, exploring examples of how to use this property in CSS.
Set a Color as Background
Let's look at a CSS background example where we show you how to set a background-color.
div { background: white; }In this CSS background example, we have set a background-color of white for the <div> tag.
Set an Image as Background
Let's look at an example where we have provided an image file to use as the background.
div { background: url("/images/gradient.png"); }In this CSS background example, we have set a background-image for the <div> tag to /images/gradient.png.
It is also wise when setting the 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: black url("/images/gradient.png"); }Now if the gradient.png image is not available, the <div> will still display a black background-color.
Finally, let's set the image to repeat horizontally.
div { background: black url("/images/gradient.png") repeat-x; }We have done this by adding the repeat-x to the background property.
Advertisements