CSS Background
The CSS background attribute is used to define the background of the HTML element.
CSS properties define background effects:
background-color
background-image
background-repeat
background-attachment
background-position
Background Color
The background-color attribute defines the background color of the element.
The background color of the page is used in the body selector:
Example
body {background-color:#b0c4de;}
In CSS, color values are usually defined in the following way:
Hexadecimal-such as: "#ff0000"
RGB-such as: "rgb(255,0,0)"
Color name-e.g. "red"
In the following example, the h1, p, and div elements have different background colors:
Example
h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;}
Background Image
The background-image attribute describes the background image of the element.
By default, the background image is tiled and repeated to cover the entire element entity.
Examples of page background image settings:
Example
body {background-image:url('paper.gif');}
Below is an example of a bad combination of text and background image. Poor text readability:
Example
body {background-image:url('bgdesert.jpg');}
Background Image - Tile horizontally or vertically
By default, the background-image property will be tiled horizontally or vertically on the page.
If some images are tiled in the horizontal and vertical directions, it looks very inconsistent, as shown below:
Example
body { background-image:url('gradient2.png'); }
If the image is only tiled horizontally (repeat-x), the page background will be better:
Example
body { background-image:url('gradient2.png'); background-repeat:repeat-x; }
Background Image - Set Positioning and Non-Tiling
Let the background image does not affect the layout of the text.
If you don't want the image to be tiled, you can use the background-repeat property:
Example
body { background-image:url('img_tree.png'); background-repeat:no-repeat; }
In the above example, the background image and the text are displayed in the same position. In order to make the page layout more reasonable and not affect the reading of the text, we can change the position of the image.
You can use the background-position property to change the position of the image in the background:
Example
body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; }
Background - Shorthand Attributes
In the above example, we can see that the background color of the page is controlled by many attributes.
In order to simplify the code of these properties, we can combine these properties in the same property.
The shorthand property of the background color is "background":
Example
body {background:#ffffff url('img_tree.png') no-repeat right top;}
When using shorthand attributes, the order of attribute values is:
background-color
background-image
background-repeat
background-attachment
background-position
You don't need to use all the above attributes, you can use them according to the actual needs of the page.
This example uses the previously introduced CSS, you can check the corresponding example: CSS example
More Examples
How to set a fixed background image.
This example demonstrates how to set a fixed background image. The image does not scroll with the rest of the page.
CSS Background Properties
Property | Description |
---|---|
background | It is a shorthand attribute, which is used to set the background properties in one statement. |
background-attachment | Whether the background image is fixed or scrolls with the rest of the page. |
background-color | Sets the background color of the element. |
background-image | Sets an image as the background. |
background-position | Set the starting position of the background image. |
background-repeat | Set whether and how the background image is repeated. |