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

Win11如何自定义背景图片Jun 30, 2023 pm 08:45 PM

Win11如何自定义背景图片？在最新发布的win11系统中，里面有许多的自定义功能，但是很多小伙伴不知道应该如何使用这些功能。就有小伙伴觉得背景图片比较单调，想要自定义背景图，但是不知道如何操作自定义背景图，如果你不知道如何定义背景图片，小编下面整理了Win11自定义背景图片步骤，感兴趣的话一起往下看看把！Win11自定义背景图片步骤1、点击桌面win按钮，在弹出的菜单中点击设置,如图所示。2、进入设置菜单，点击个性化,如图所示。3、进入个性化，点击背景,如图所示。4、进入背景设置，点击浏览图片

如何在win10个性化设置中删除背景图片Dec 21, 2023 pm 02:31 PM

Win10系统每次使用过的桌面背景都会在设置中的个性化背景图片里面显示，有些用户想删除，但是不知道怎么操作，这篇文章是本站给大家分享的Win10个性化背景图片删除方法。查看使用过的桌面背景图片：1、桌面空白处点击【右键】，在打开的菜单项中，选择【个性化】；2、在背景中的选择图片中，可以查看到您使用过的桌面背景图片；删除使用过的桌面背景图片：注意：本操作涉及到修改注册表，修改注册表有风险，请提前备份数据1、同时按下【Win+R】组合键，打开运行窗口，输入【regedit】命令，然后点击【确定】；2

抖音直播伴侣怎样添加背景图片-抖音直播伴侣添加背景图片的方法Mar 05, 2024 am 09:16 AM

很多在抖音做直播的用户都会使用抖音直播伴侣软件，不过你们知道抖音直播伴侣怎样添加背景图片吗?下文就是小编为你们带来的抖音直播伴侣添加背景图片的方法，感兴趣的用户快来下文看看吧。首先登录电脑上的抖音直播伴侣，然后进入主页。在左边，我们选择[添加材料]在[场景1]下面。接着，页面上会有一个添加材料的窗口，我们可以直接选择[图片]功能点击进入。然后，我们会打开一个当地存放图片材料的窗口。我们需要选择我们想要添加的图片材料，然后点击右下角的打开按钮添加它们。添加图片后，我们需要用鼠标左键将图片拉到合适的

ppt背景图片怎么统一替换Mar 25, 2024 pm 04:16 PM

PPT 背景图片的统一替换是提升演示文稿视觉风格的重要操作，可通过两种主要方法实现：幻灯片母版替换和批量替换。幻灯片母版替换涉及在母版中删除原有图片并插入新图片，从而应用于所有幻灯片。批量替换功能则直接替换演示文稿中所有幻灯片的背景图片。统一背景图片不仅美化演示文稿，还增强观众专注力。选择与主题相符且质量高的图片至关重要，并应注意调整透明度、大小等细节。此外，PPT 还提供丰富的背景设置选项，如渐变、纹理和图案，可根据需求自定义调整。

WPS Office 2016中背景图片的设置方法介绍Mar 29, 2024 pm 10:21 PM

1、启动WPS演示，如图。2、点击【+】按钮，新建幻灯片，如图。3、点击右键，选择【背景】，如图。4、在【对象属性】页的填充选项中，选择【图片或纹理填充】，如图。5、在图片来源中，点击】本地文件【，如图。6、在对话框中，选择想要插入的图片，并点击】打开【按钮，如图的例子。7、这样就完成WPS演示的背景图片设置了。如图的效果。

ppt背景图片怎么设置Mar 25, 2024 pm 04:12 PM

设置PPT背景图片可以为演示文稿增添视觉效果和吸引力。本教程详细介绍了如何选择合适的图片、设置背景图片以及调整其与演示内容的协调性。通过遵循本指南，你可以轻松地为PPT创建出令人印象深刻的背景图片，提升演示文稿的整体效果。

ppt背景图片怎么设置全部应用Jan 07, 2021 pm 04:58 PM

设置方法：1、打开制作好的需要编辑的PPT文件；2、点击“对象属性”按钮，打开“对象属性”菜单，将“填充”设置为“图片或纹理填充”，之后点击“请选择图片”，选择“本地上传”；3、选择背景图片，点击“打开”按钮；4、点击“全部应用”按钮即可。

ppt换背景图片怎么换Mar 20, 2024 pm 09:21 PM

相信大家都看过别人用ppt做的报告，好看的ppt报告会给同事上司一个好的印象，而添加一张好看的背景图片对于ppt的美观性非常重要，当然如果觉得不合适也可以进行替换。下面小编给大家讲解下ppt换背景图片的操作方法。首先，以WPS演示文稿的格式打开PPT文件，然后在页面的空白处右键单击鼠标，会弹出一个信息框。接着，在信息框中选择“背景”选项。2、点击后可以看到电脑的右侧栏中出现了图片属性信息，当前背景默认的是纯色填充，背景就是我们看到的白色。3、当然我们还可以选择其他的填充方式，如图案填充，并且还可

See all articles