9.css background, css background image adaptive
This section also describes the expansion of the box model, and I personally like to think of the box model as a picture. The element size adjustment is the canvas size adjustment, and the border setting is the frame mosaic. However, it is not enough for an artist to present the painting to an art museum (web page), just as the background can be depicted in various paintings, you can also set a background for your painting.
The following table summarizes some background attributes:
| Attribute | Value | Description | CSS version |
| Background-color | Color | Background Color | 1 |
| Background-image | None or url | Background Image | 1, 3 |
| Background-repeat | Style name | Style of the background image | 1, 3 |
| Background-size | Length value or other | Size of the background image | 3 |
| Background-position | Coordinates | Location of the background image | 1 |
| Background-attachment | Scroll Mode | Scroll of background image | 1, 3 |
| Background-clip | Cropping Mode | Crop background images | 3 |
| Background-origin | Coordinates | Starting Point of the background image | 3 |
| Background | Compound Value | Abbreviations of background images | 1 |
From the above table, we can see that the background is nothing more than two: 1. Color, 2. Image and related settings. Next we will illustrate it one by one.
1. Background Color
| Value | Description | CSS version |
| Color | Set the background color to the specified color. | 1 |
| Transparent | Set the background color to transparent | 1 |
div {
background-color: silver;
}
Explanation: For color values, see css color. The background color of the element is transparent, which is the default color of the browser. Therefore, it is seldom necessary to set it. In addition, the color of the entire page is set for the <body> element.
2. Background Image
2.1 Introduction of images
You can use the background-image attribute to introduce images to the background.
| Value | Description | CSS version |
| None | Cancel background image settings | 1 |
| Url | Set the background image through URL | 1 |
body {
background-image: url(loading.gif);
}
Explanation: the value of none is used to solve the Inheritance Problem of sub-elements, and the url contains the resource address of the image.
2.2 tiled Image
Determined by the background-repeat attribute
| Value | Description | CSS version |
| Repeat-x | Horizontal tiled Image | 1 |
| Repeat-y | Vertically tiled Image | 1 |
| Repeat | Tiled images in both the horizontal and vertical directions | 1 |
| No-repeat | Disable tiled Images | 1 |
body {
background-image: url(loading.gif);
background-repeat: no-repeat;
}
Explanation: the so-called tile means that when the image is smaller than the size of the element, it will try to copy itself and fill the entire element.
2.3 adjust the image position
You can use the background-position attribute to adjust the position of an image in an element. In general, you must disable the image tiled.
| Value | Description | CSS version |
| Top | Position the background image to the top of the element | 1 |
| Left | Position the background image to the left of the element. | 1 |
| Right | Position the background image to the right of the element. | 1 |
| Bottom | Locate the background image to the bottom of the element | 1 |
| Center | Locate the background image to the middle of the element. | 1 |
| Length Value | Use the length value to offset the image position | 1 |
| Percentage | Offset the image position by percentage | 1 |
/ * Place the background image at the top of the page. If you want to place it at the top left, the value is: top left * /
body {
background-image: url (loading.gif);
background-repeat: no-repeat;
background-position: top;
}
/ * Use length value or percentage, the first value represents the left side, and the second value represents the top side * /
body {
background-image: url (loading.gif);
background-repeat: no-repeat;
background-position: 20px 20px;
}
2.4 image size
Controlled by the background-size attribute.
| Value | Description | CSS version |
| Auto | Default value. The image is displayed in the original size. | 3 |
| Cover | Proportional scaling of the image to make the image cover at least the container, but may exceed the container | 3 |
| Contain | Scale the image proportionally so that the image width and height are larger than those in the container horizontally or vertically. | 3 |
| Length Value | CSS length values, such as px and em | 3 |
| Percentage | For example: 100% | 3 |
For more information, see the table.
2.5 whether the image is scrolling
Controlled by the background-attachment attribute.
| Value | Description | CSS version |
| Scroll | Default value. The background is fixed on the element and does not scroll along with the content. | 1 |
| Fixed | The background is fixed in the window, and the background does not move when the content is rolled | 1 |
body {
background-image: url(loading.gif);
background-attachment: fixed;
}
Explanation: The fixed value will cause the watermark effect on the background. Drag the scroll bar and the background will not move.
2.6 The image is displayed in the area of the element.
It is controlled by the background-origin. Unlike the image position adjustment, the position adjustment is displayed inside the element by default. In addition to the elements, the position adjustment also includes the padding and border.
| Value | Description | CSS version |
| Border-box | Draw the background on the border of the element | 3 |
| Padding-box | Draw the background at the element padding. | 3 |
| Content-box | Draw the background in the element content section | 3 |
div {
width: 400px;
height: 300px;
border: 10px dashed red;
padding: 50px;
background-image: url(img.png);
background-repeat: no-repeat;
background-origin: content-box;
}
Explanation: to draw a background in the content section is to set the start position of the background.
2.7 crop images
Controlled by background-clip. When the image size is smaller than the element, it is tiled. When the value is greater than, we need to determine whether to crop the excess part.
| Value | Description | CSS version |
| Border-box | Crop the background inside the element box | 3 |
| Padding-box | Crop the background inside the inner margin box | 3 |
| Content-box | Crop the background inside the content | 3 |
div {
width: 400px;
height: 300px;
border: 10px dashed red;
padding: 50px;
background-image: url(img.png);
background-repeat: no-repeat;
background-origin: border-box;
background-clip: padding-box;
}
2.8 abbreviations
Like many settings, the background is also abbreviated as follows:
[Background-color]
[Background-image]
[Background-repeat]
[Background-attachment]
[Background-position]/[background-size]
[Background-origin]
[Background-clip];
div {
width: 400px; height:
300px; border: 10px dashed red;
padding: 50px;
background: silver url(img.png) no-repeat scroll left top/100% border-box content-box;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
