How to stretch css background image to 100% and set full screen display-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

How to stretch css background image to 100% and set full screen display

不言

Mar 30, 2018 am 11:06 AM

100%Background picture

Nowadays, the use of css is also very important to many users. It can stretch images very well without leaving traces. This article will share with you about stretching css background images to How to set up 100% full screen display, friends in need can refer to it.

Nowadays, the use of CSS is also very important to many users. It can stretch images very well without leaving any traces. So when we use css, what should we do if the background image is stretched to 100% and displayed full screen? What is the specific code?

How to use css background image to stretch it to 100% full screen display? This question may sound 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, p, span). The length and width of this background cannot be modified before CSS2.1.

Therefore, 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. Therefore, there are generally two types of background images:

1. It is a large picture, the size of which exactly matches the size of the area

2. A very small bar chart, after repeating, forms a very regular large picture background.

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):

code show as below:

#background-size{

background-size:200px 100px;

}

Background image size (in percentage):

code show as below:

#background-size2{

background-size:30% 60%;

}

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

code show as below:

#background-size3{

background-size:cover;

}

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

code show as below:

#background-siz

e4{

background-size:contain;

}

Background image size (fill the element with the image's own size, i.e. auto value):

code show as below:

#background-size5{

background-size:auto;

}

<html>
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
</head>
<style>
#bgvid1{
width:100%;
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
height: auto;
z-index: -100;
background-size: cover;
}
</style>
<body>
<img  src="/static/imghwm/default1.png"  data-src="/uploads/common/veryhuo.gif"  class="lazy"  id="bgvid1"  alt="How to stretch css background image to 100% and set full screen display" >
</body>
</html>
<p style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href=&#39;http://www.veryhuo.com/&#39; target=&#39;_blank&#39;>http://www.veryhuo.com/</a></p>

Related recommendations:

What should be the appropriate size for repeated tiled css background images? _html/css_WEB-ITnose

Will leaving a lot of transparency in the css background image affect the web page? _html/css_WEB-ITnose

css background image is loaded first and then rendered. I hope everyone will take a look_html/css_WEB-ITnose

The above is the detailed content of How to stretch css background image to 100% and set full screen display. For more information, please follow other related articles on the PHP Chinese website!

Statement

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

How can you protect against Cross-Site Scripting (XSS) attacks related to sessions?Apr 23, 2025 am 12:16 AM

To protect the application from session-related XSS attacks, the following measures are required: 1. Set the HttpOnly and Secure flags to protect the session cookies. 2. Export codes for all user inputs. 3. Implement content security policy (CSP) to limit script sources. Through these policies, session-related XSS attacks can be effectively protected and user data can be ensured.

How can you optimize PHP session performance?Apr 23, 2025 am 12:13 AM

Methods to optimize PHP session performance include: 1. Delay session start, 2. Use database to store sessions, 3. Compress session data, 4. Manage session life cycle, and 5. Implement session sharing. These strategies can significantly improve the efficiency of applications in high concurrency environments.

What is the session.gc_maxlifetime configuration setting?Apr 23, 2025 am 12:10 AM

Thesession.gc_maxlifetimesettinginPHPdeterminesthelifespanofsessiondata,setinseconds.1)It'sconfiguredinphp.iniorviaini_set().2)Abalanceisneededtoavoidperformanceissuesandunexpectedlogouts.3)PHP'sgarbagecollectionisprobabilistic,influencedbygc_probabi

How do you configure the session name in PHP?Apr 23, 2025 am 12:08 AM

In PHP, you can use the session_name() function to configure the session name. The specific steps are as follows: 1. Use the session_name() function to set the session name, such as session_name("my_session"). 2. After setting the session name, call session_start() to start the session. Configuring session names can avoid session data conflicts between multiple applications and enhance security, but pay attention to the uniqueness, security, length and setting timing of session names.

How often should you regenerate session IDs?Apr 23, 2025 am 12:03 AM

The session ID should be regenerated regularly at login, before sensitive operations, and every 30 minutes. 1. Regenerate the session ID when logging in to prevent session fixed attacks. 2. Regenerate before sensitive operations to improve safety. 3. Regular regeneration reduces long-term utilization risks, but the user experience needs to be weighed.

How do you set the session cookie parameters in PHP?Apr 22, 2025 pm 05:33 PM

Setting session cookie parameters in PHP can be achieved through the session_set_cookie_params() function. 1) Use this function to set parameters, such as expiration time, path, domain name, security flag, etc.; 2) Call session_start() to make the parameters take effect; 3) Dynamically adjust parameters according to needs, such as user login status; 4) Pay attention to setting secure and httponly flags to improve security.

What is the main purpose of using sessions in PHP?Apr 22, 2025 pm 05:25 PM

The main purpose of using sessions in PHP is to maintain the status of the user between different pages. 1) The session is started through the session_start() function, creating a unique session ID and storing it in the user cookie. 2) Session data is saved on the server, allowing data to be passed between different requests, such as login status and shopping cart content.

How can you share sessions across subdomains?Apr 22, 2025 pm 05:21 PM

How to share a session between subdomains? Implemented by setting session cookies for common domain names. 1. Set the domain of the session cookie to .example.com on the server side. 2. Choose the appropriate session storage method, such as memory, database or distributed cache. 3. Pass the session ID through cookies, and the server retrieves and updates the session data based on the ID.

See all articles