How to set background in HTML-Front-end Q&A-php.cn

How to set background in HTML

PHPz

Release： 2023-04-21 11:36:38

Original

4797 people have browsed it

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:

Use attributes to set the background color
In HTML, you can use the background-color attribute to set the background color. In CSS, you can use selectors to set different background colors for different parts of the web page.

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>

Copy after login

In the above example, the background color of the body element is set to #f0f0f0, which is light gray.

Use attributes to set background images
In addition to setting the background color, you can also use the background-image attribute to set a background image in HTML.

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>

Copy after login

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.

Use attributes to set the background position
In a web page, you can use the background-position attribute to set the position of the background image.

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>

Copy after login

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!