Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > How to make the background image stretch and fill in css to avoid repeated display_html5 tutorial skills

How to make the background image stretch and fill in css to avoid repeated display_html5 tutorial skills

WBOY
Release： 2016-05-16 15:49:16
Original
3561 people have browsed it

How to make the background image stretch and fill, this question sounds simple. But I'm sorry to tell you. It's not as simple as we think.
For example, set a background in a container (body, div, span). The length and width of this background cannot be modified before CSS2.1.
So the actual result can only be displayed repeatedly, so the attributes repeat, repeat-x, repeat-y, and no-repeat appear. It is used to control the display of background images. So there are two types of background images :

1. A whole large image, the size of which exactly matches the area size
2. A very small bar image, After repeating, a very regular large picture background is formed.

But after the emergence of CSS3, this situation has been improved. The background-size property can make our previous wishes come true.
And this property can be used on firefox, chrome, and ie9.

The specific usage method is as follows:
Background image size (numeric representation):

Copy code
The code is as follows:

#background-size{
background-size:200px 100px;
}

Background image Size (expressed in percentage):

Copy code
The code is as follows:

#background -size2{
background-size:30% 60%;
}

Background image size (expand the image proportionally to fill the element, that is, cover value):

Copy code
The code is as follows:

#background-size3{
background-size:cover ;
}

Background image size (reducing the image proportionally to fit the size of the element, that is, the contain value):

Copy code
The code is as follows:

#background-size4{
background-size:contain;
}

Background image size (fill the element with the size of the image itself, i.e. auto value):

Copy code
The code is as follows:

#background-size5{
background-size:auto;
}
Related labels：
Background picture
source：php.cn
Previous article：Html5 implements iPhone boot interface sample code_html5 tutorial skills Next article：html5 input attribute usage example_html5 tutorial skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Dynamically modify inline CSS styles in Javafx I'm trying to change the background image of a pane when the application is maximized. My ...
From 2024-04-06 20:57:16
0
1
487
CSS styles not applied to site I'm making a website using Bootstrap5 but the index.css properties are not being applied t...
From 2024-04-06 17:12:23
0
1
336
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
I'm having trouble with a CSS grid where the height isn't what I expected, what mistakes might I be making? I'm currently learning CSS grids and was asked to make this card by breaking it into a gri...
From 2024-04-06 12:52:14
0
1
339
Problems with the connection between the face recognition terminal iVMS-4200 and the base The face recognition terminal iVMS-4200 displays an error when connecting to the mysql dat...
From 2024-04-06 12:20:33
0
1
347
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template