Home > Article > Web Front-end > How to set background in HTML? A brief analysis of various methods
How to set background in HTML? A brief analysis of various methods
- PHPzOriginal
- 2023-04-21 11:27:534584browse
In web design, setting the background is a very basic skill. In HTML, we can set the background of the page in a variety of ways, including solid color background, picture background, repeating background, tiled background, gradient background, etc. Below I will introduce how to use these methods to set the background of HTML pages.
Solid color background
Solid color background is the simplest background type. You only need to set the background color attribute of HTML. For example:
<body style="background-color: #f2f2f2;">
where #f2f2f2 is a hexadecimal color code, representing light gray. You can find more color codes here: https://htmlcolorcodes.com/.
Picture background
In HTML, we can use pictures as the background of the page. You can directly use the img tag to achieve this, but doing so may affect the page loading speed, so it is recommended to use CSS to set the background image. For example:
<body style="background-image: url('image.jpg');">
Where, image.jpg is the picture you want to set as the background. Note that the image needs to be placed in the same directory as the HTML file. You can use relative or absolute paths to specify image locations. You can also add other attributes. For example, the following code sets the position of the image to be centered and non-repeating:
<body style="background: url('image.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;">
The cover attribute here will automatically adjust the image size to fit the page size. If you don't want the image to be stretched and deformed, you can use contain instead of cover.
Repeat background
Setting a repeating background allows a small image to be continuously tiled to fill the entire page, thereby reducing the image size and improving page speed. In CSS, use repeat or repeat-x or repeat-y to set how the image repeats. For example:
<body style="background-image: url('image.jpg'); background-repeat: repeat-y;">
Tile background
Using a tile background allows a picture or a color to be tiled until it fills the entire page background. In CSS, use the background-size and background-position properties to control the position and size of images or colors. For example:
<body style="background-image: url('image.jpg');
background-position: center top;
background-size: auto 100%;
background-repeat: no-repeat;">
auto and 100% here mean automatically adjusting the width, and the height is 100%.
Gradient background
Using gradient background can make the page look more fashionable. In CSS, you can use linear-gradient or radial-gradient to create flat or radial gradients. For example:
<body style="background: linear-gradient(to right, #f2f2f2, #ffffff);">
To right is used here to indicate that the gradient direction is from left to right, #f2f2f2 and #ffffff are the color values of the starting and ending points.
Summary
There are many ways to set the background of an HTML page, including solid color background, picture background, repeating background, tiled background and gradient background. Through these methods, you can add different styles and features to your website.
The above is the detailed content of How to set background in HTML? A brief analysis of various methods. For more information, please follow other related articles on the PHP Chinese website!