How to set background in HTML? A brief analysis of various methods-Front-end Q&A-php.cn

How to set background in HTML? A brief analysis of various methods

PHPz

Release： 2023-04-21 11:33:56

Original

4519 people have browsed it

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;">

Copy after login

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(&#39;image.jpg&#39;);">

Copy after login

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(&#39;image.jpg&#39;) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;">

Copy after login

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(&#39;image.jpg&#39;); background-repeat: repeat-y;">

Copy after login

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(&#39;image.jpg&#39;); 
    background-position: center top; 
    background-size: auto 100%;
    background-repeat: no-repeat;">

Copy after login

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);">

Copy after login

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!