Home > Article > Web Front-end > How to set background in HTML
In web design, background is one of the very important elements. By changing the background, you can make the web page more beautiful and improve the user experience. This article will introduce how to set the background in HTML.
The following methods can be used to set the background in HTML:
The following example demonstrates how to set the background color for the body element of a web page:
<!DOCTYPE html> <html> <head> <title>设置背景颜色示例</title> <style> body { background-color: #f0f0f0; } </style> </head> <body> <!-- 网页内容 --> </body> </html>
In the above example, the background color of the body element is set to #f0f0f0, which is light gray.
The following example demonstrates how to set the background image for the body element of a web page:
<!DOCTYPE html> <html> <head> <title>设置背景图片示例</title> <style> body { background-image: url("bg.jpg"); background-repeat: no-repeat; background-size: cover; } </style> </head> <body> <!-- 网页内容 --> </body> </html>
In the above example, the background image of the body element is set to the bg.jpg image, and passed The background-repeat attribute specifies not to display the background image repeatedly. At the same time, the background-size attribute sets the size of the background image to adapt to the window size.
The following example demonstrates how to set the background image and position for the body element of a web page:
<!DOCTYPE html> <html> <head> <title>设置背景图片和位置示例</title> <style> body { background-image: url("bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; } </style> </head> <body> <!-- 网页内容 --> </body> </html>
In the above example, the background image of the body element is set to the bg.jpg image, And set the background image to be centered through the background-position property.
To sum up, there are many ways to set the background in HTML. According to actual needs, you can set the background color, background image and background position through attributes. By flexibly using these attributes, you can make the design of the web page more beautiful and enhance the user experience.
The above is the detailed content of How to set background in HTML. For more information, please follow other related articles on the PHP Chinese website!