How to use image as background in html document?-HTML Tutorial-php.cn

How to use image as background in html document?

青灯夜游

Release： 2022-01-12 15:37:59

Original

61950 people have browsed it

In HTML, you can use the image as the background by setting the css background or background-image style for the body tag. The syntax format is "background/background-image:url("image path");".

How to use image as background in html document?

(Recommended tutorial: html tutorial)

You can use the css background or background-image attribute in the html document to The picture is set as the background. background can set all background properties in one statement. background-image specifies one or more background images to be used.

The properties that background can set are: background-color, background-position , background-size, background-repeat, background-origin, background-clip, background-attachment and background-image.

Separate each value with a space, in no particular order. It is possible that only some of these values, such as background: #FF0000 URL (smiley.gif); are allowed.

Example: Use the picture as the background

<html>
<head>
<style type="text/css">
body
{ 
background: url(bg.jpg) ; 
/*background-image: url(bg.jpg);*/
}
</style>
</head>

<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>

</html>

Copy after login

Rendering:

How to use image as background in html document?

This is a tile of multiple pictures , if you want a picture to occupy the full screen, you can use the background-repeat attribute, or add a no-repeat value to the background attribute.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			body {
				/*background: url(bg.jpg) no-repeat;*/
				background-image: url(bg.jpg);
				background-repeat:no-repeat;
			}
		</style>
	</head>

	<body>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
	</body>

</html>

Copy after login

Rendering:

How to use image as background in html document?

For more programming-related knowledge, please visit: Programming Course! !

The above is the detailed content of How to use image as background in html document?. For more information, please follow other related articles on the PHP Chinese website!