9.css background, css background image adaptive

Source: Internet
Author: User

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; 
}

 


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.