How to set background color and image using CSS-CSS Tutorial-php.cn

How to set background color and image using CSS

不言

Release： 2021-04-21 17:19:29

Original

7080 people have browsed it

How to set the background color and image with CSS: 1. Set the background color through the background-color attribute; 2. Set the background image through the background-image attribute.

How to set background color and image using CSS

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

To use CSS to set the background, we need to use the background background attribute. Through the background attribute, we can set the background color and background image. Let's take a look at the specific method of setting the background with CSS.

Let’s take a look firstCSS setting background color

We need to use background-color to change the background color

background-color:value（颜色编码或者颜色名称）

Copy after login

In the value section, you can enter a color code such as #000000 or a color name such as white, and the set color will be the background color.

The initial value of background-color is transparent, in which case the background color of the parent element will be applied. If there is no setting in the parent element, it will turn white.

CSS Set Image Background

By using the background-image property, we can pre-set the image uploaded to the server as the background.

background-image: url("图像的路径");

Copy after login

In url, enter the path to the image file you want to use as the background. If the css file and image file are in the same directory, just the filename will be fine.

Both absolute paths and relative paths can be used as paths to image files.

To enter a relative path, enter the relative path to the external style sheet, not the relative path to the html file.

Then let’s look at specific examples

Use background-color to set the background color

The code is as follows

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    body{
      background-color: skyblue;
    }
  </style>
</head>
<body>
<p>How to set background color and image using CSS设置</p>
</body>
</html>

Copy after login

The running result

displays the following effect on the browser. The specified color skyblue is set as the background color

How to set background color and image using CSS

Use background-image to set the background image

The code is as follows

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    body{
      background-image: url("img/t.jpg");
    }
  </style>
</head>
<body>
<p>How to set background color and image using CSS设置</p>
</body>
</html>

Copy after login

The running effect is shown in the figure below

How to set background color and image using CSS

When the screen size is larger than the background image, it will automatically repeat by default Display background image. This setting can be changed using the background-repeat attribute.

The background image display starting position is at the upper left corner of the initial setting. This setting can be changed using the background-position property

The above is the detailed content of How to set background color and image using CSS. For more information, please follow other related articles on the PHP Chinese website!