CSS Backgrounds (background)

CSS background

The background color

background-color defines the background color of the element.

The background color of the page is used body selector:

In CSS, color values are typically defined as follows:

• Hetean - e.g. "#ff0000"
• RGB - e.g.: "rgb (255,0,0)"
• Color name - e.g. "red"

In the following examples, h1 p div elements have different background colors:

Tip: You can set the background color for all elements, body em up to em and a

Tip: background-color be inherited, and its default value is transparent If an element does not specify a background color, the background is transparent so that the background of its parent element is visible.

---

The background image

background-image describes the background image of the element.

By default, the background image is tiled and repeated to cover the entire element entity.

Page background picture settings instance:

Here is an example of a poor combination of text and background images. Poor readability of text:

---

Background image - horizontal or vertical tile

If you need to tile the background image on an HTML page, you can use background-repeat property.

By background-image property is tiled horizontally or vertically on the page.

Some images look out of alignment if they are tiled horizontally and vertically, as follows:

The page background is better if the image is only tiled horizontally (repeat-x)

---

Background Image - Set positioning and uneven

Let the background image not affect the layout of the text

If you don't want the image tiled, you can background-repeat property:

In the above example, the background image and text are displayed in the same place, in order to make the page layout more reasonable, does not affect the reading of the text, we can change the position of the image.

You can use background-position to change the position of the image in the background:

Tip: There are many ways to provide values for background-position properties. F irst, you can use some keywords: top bottom left right and center Different types of values differ slightly in the placement of background images.

Percentage value

Percentage values are more complex to represent. Suppose you want to center an image in its element with a percentage value, and you can set it up by following this code:

This causes the image to be placed appropriately, with its center aligned to the center of its element.

Therefore, if you want to place an image horizontally 2/3 and vertically 1/3, you can declare this:

The length value

The length value explains the offset in the upper-left corner of the element's margin area, which is the upper-left corner of the image.

For example, if you set the value to 50px 100px, the upper left corner of the image will be 50 pixels to the right in the upper left corner of the inner margin area of the element and 100 pixels down:

Note that this is different from the percentage value because the offset is only from one upper left corner to the other upper left corner. That is, the upper-left corner of the image background-position point in the background-position declaration.

---

Background - Short-case properties

In the above example we can see that the background color of the page is controlled by a number of properties.

To simplify the code for these properties, we can combine them in the same property.

The short-case property of the background color is "background":

When short-case properties are used, the order of property values is:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

The above properties do not need to be used in full, you can follow the actual needs of the page to use.

This instance uses the CSS described earlier, and you can view the instance: the CSS instance

---

How to set a fixed background image
This example shows how to set a fixed background image. The image does not scroll with the rest of the page.

---

CSS background properties

Property	describe
background	Short-write properties, the role is to set the background attribute in a declaration.
background-attachment	Background image is fixed or scrolled with the rest of the page.
background-color	Set of elements background color.
background-image	Set the image as a background.
background-position	Set the starting position of the background image.
background-repeat	Set whether or not the background image is repeated.