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 does PHP identify a user's session?May 01, 2025 am 12:23 AM

PHPidentifiesauser'ssessionusingsessioncookiesandsessionIDs.1)Whensession_start()iscalled,PHPgeneratesauniquesessionIDstoredinacookienamedPHPSESSIDontheuser'sbrowser.2)ThisIDallowsPHPtoretrievesessiondatafromtheserver.

What are some best practices for securing PHP sessions?May 01, 2025 am 12:22 AM

The security of PHP sessions can be achieved through the following measures: 1. Use session_regenerate_id() to regenerate the session ID when the user logs in or is an important operation. 2. Encrypt the transmission session ID through the HTTPS protocol. 3. Use session_save_path() to specify the secure directory to store session data and set permissions correctly.

Where are PHP session files stored by default?May 01, 2025 am 12:15 AM

PHPsessionfilesarestoredinthedirectoryspecifiedbysession.save_path,typically/tmponUnix-likesystemsorC:\Windows\TemponWindows.Tocustomizethis:1)Usesession_save_path()tosetacustomdirectory,ensuringit'swritable;2)Verifythecustomdirectoryexistsandiswrita

How do you retrieve data from a PHP session?May 01, 2025 am 12:11 AM

ToretrievedatafromaPHPsession,startthesessionwithsession_start()andaccessvariablesinthe$_SESSIONarray.Forexample:1)Startthesession:session_start().2)Retrievedata:$username=$_SESSION['username'];echo"Welcome,".$username;.Sessionsareserver-si

How can you use sessions to implement a shopping cart?May 01, 2025 am 12:10 AM

The steps to build an efficient shopping cart system using sessions include: 1) Understand the definition and function of the session. The session is a server-side storage mechanism used to maintain user status across requests; 2) Implement basic session management, such as adding products to the shopping cart; 3) Expand to advanced usage, supporting product quantity management and deletion; 4) Optimize performance and security, by persisting session data and using secure session identifiers.

How do you create and use an interface in PHP?Apr 30, 2025 pm 03:40 PM

The article explains how to create, implement, and use interfaces in PHP, focusing on their benefits for code organization and maintainability.

What is the difference between crypt() and password_hash()?Apr 30, 2025 pm 03:39 PM

The article discusses the differences between crypt() and password_hash() in PHP for password hashing, focusing on their implementation, security, and suitability for modern web applications.

How can you prevent Cross-Site Scripting (XSS) in PHP?Apr 30, 2025 pm 03:38 PM

Article discusses preventing Cross-Site Scripting (XSS) in PHP through input validation, output encoding, and using tools like OWASP ESAPI and HTML Purifier.

See all articles