Summary of common knowledge about CSS page layout (page background)

There is a lot of knowledge in CSS, and it is impossible for us to remember it all. In my spare time, I compiled some common knowledge about CSS page layout. This article will share with you the common knowledge about CSS page background. Friends in need can refer to it, I hope it can help you.

1. Set the background color

CSS provides the background-color property to set the background color of the page.

Example: background-color: red;

2. Set background image

Add image to page

Syntax: < img src=”pic.jpg”/>

Add a background image to the page

CSS provides the background-image attribute to directly add a background image to the page.

Syntax: background-image: url (pic.jpg);

(1) Tiling of background images

CSS provides background-repeat Property sets the tiling method of the background image. There are four attributes: repeat (the background image is tiled horizontally and vertically), no-repeat (the background image is not tiled horizontally), repeat-x (the background image is tiled horizontally), repeat-y (the background image is tiled vertically). shop).

Syntax: background-repeat: repeatmode;

(2) The position of the background image

CSS provides the background-position attribute to set the background image and page relative position.

Syntax: background-position: position;

The position can be determined using length units, percentages, and keywords.

Use length unit: background-position: 10px 20px; (the background image translates 10px along the x-axis and 20px along the y-axis)

Use percentage: background-position: 30% 30%;

Use keywords: background-position: right bottom; The attribute values ​​include left, center, and right in the horizontal direction, and top, center, and bottom in the vertical direction.

(3) Fixed and scrolling background images

CSS provides the background-attachment attribute. The attribute value scroll indicates that the background image scrolls with the object content; fixed indicates that the background image is fixed.

Example: background-attachment: fixed;

3. Page background attributes

Attributes background-image, background-position, background-repeat, The four properties of background-attachment can be abbreviated using background.

Example: background: url (pic.jpg) 10px 20px repeat fixed;

The above is the detailed content of Summary of common knowledge about CSS page layout (page background). For more information, please follow other related articles on the PHP Chinese website!