简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

Make the background image adapt to the browser size in HTML

不言
Release： 2018-06-05 15:27:18
Original
6788 people have browsed it

This article mainly introduces relevant information on the detailed examples of making the background image adapt to the browser size in HTML. Friends in need can refer to

Making the background image adapt to the browser size in HTML Detailed example explanation

Solution:

1. The picture is not big enough, and the background attribute cannot stretch the picture;

2. You can only use a p, set its z-index value to negative, and make the size of this p the size of the entire body. Use in p;

3. Remove the background attribute of the body, otherwise it will be covered. 

<html> 
<body> 
<p id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%"> 
<img src="pictures/background.jpg" width="100%" height="100%"/> 
</p> 
</body> 
</html>
Copy after login

If you want the image not to scroll with the scroll bar on the right side of the browser, use the position:fixed attribute. Wordpress website builders can also use this method to customize their own background images on designated pages.

Thank you for reading, I hope it can help you, thank you for your support of this site!

Related recommendations:

Html realizes the report effect of dynamically displaying color blocks (example code)

The above is the detailed content of Make the background image adapt to the browser size in HTML. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
HTML中使背景图片自适应浏览器大小 HTML背景图片自适应
source：php.cn
Previous article：How to draw pictures on js HTML5 canvas Next article：JS implements method to change text color and content on HTML
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
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
2
1803
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
10
1944
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1654
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1557
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1588
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！