How does css make the background image stretch and fill to avoid repeated display? css background image

Source: Internet
Author: User

How does css make the background image stretch and fill to avoid repeated display? css background image

The question of how to stretch and fill the background image seems very simple. But I am sorry to tell you. It's not that simple as we thought.
For example, you can set a background in a container (body, div, span. The length and width of the background cannot be modified before css2.1.
Therefore, the actual results can only be displayed repeatedly, so the attributes repeat, repeat-x, repeat-y, and no-repeat appear. Is used to control the display of background images.Therefore, there are two types of background images.:

1. It is a whole big image with the same size as the area.
2. A small bar chart uses repeat to form a very regular big image background.

However, this situation is improved when css3 appears. The background-size attribute can make our previous hopes come true.
This attribute can be used in firefox, chrome, and ie9.

The usage is as follows: 
Background image size (numerical representation ):

Copy the Code as follows:
#background-size{ background-size:200px 100px; } 

  


Background image size (percentage representation ):

Copy the Code as follows:
#background-size2{ background-size:30% 60%; } 

  


Background image size (extended image to fill with elements, that is, cover value ):

Copy the Code as follows:
#background-size3{ background-size:cover; }

  

 


Background image size (proportional reduction of the image to adapt to the element size, that is, the contain value ):

Copy the Code as follows:
#background-size4{ background-size:contain; } 

  


Size of the background image (fill the element with the image size, that is, the auto value ):

Copy the Code as follows:
#background-size5{ background-size:auto; } 

  

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.