search

Home >Web Front-end >HTML Tutorial >How to set background image in html

How to set background image in html

藏色散人
藏色散人Original
2021-04-02 10:07:5164934browse

htmlHow to set the background image: First create an HTML sample file; then use background and style to set the background image.

How to set background image in html

# Operating environment for this article: Windows 7 system, HTML5&&CSS3 version, DELL G3 computer

HTML set picture as page background:

Question:

in HTML page How to set an image as the page background without using the CSS box model?

Method:

Use background and style in to set

Example:

Here I put the html format files and jpg format image files on the desktop


How to set background image in html

<html>
         <head>
	<meta content="text/html" charset="UTF-8">
	<title>HTML设置图片为页面背景</title>
         </head>
         <body background="夕阳余晖.jpg" 
               style="background-repeat:no-repeat               
               background-attachment:fixed;               
               background-size:100% 100%; ">
         </body></html>

Running result demonstration:
How to set background image in html

Code explanation: 

background=".../...jpg&#39;"

The value in double quotes is

The path to store the image

background-repeat:no-repeat;

Settings Picture

Do not display repeatedly

background-attachment:fixed;

Set the

position of the picture to be fixed

background-size:100% 100%;

Set the picture

reach 100% of the window

The above is how to set an image as the background of the page without using the CSS box model in HTML

Recommended study: "

HTML Video Tutorial"

The above is the detailed content of How to set background image in html. 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
Previous article：How to set html without line breaksNext article：How to set html without line breaks

Related articles

See more