How to set image background in html? Introduction to background properties

In web design, sometimes we need to use pictures as backgrounds to beautify web pages. HTML provides a variety of methods to set the background of images. This article will introduce how to use the background attribute of CSS to set the background of images.

1. Use the background-image attribute to set the image background

The background-image attribute is used to set the background image of the element. It can specify one or more image files and can be combined with other backgrounds. properties are used together.

The syntax is as follows:

background-image: url(path);

Among them, url() specifies the path of the image, which can be a relative path or an absolute path. For example, the following code sets an image background:

body {
  background-image: url(bg.jpg);
}

In this example, the bg.jpg image will be used as the background of the entire page. It should be noted that in HTML, we place this CSS code in the style tag or in an external CSS file.

2. Use the background-repeat attribute and background-position attribute

We usually also need to set the repetition method and position of the image. At this time, we need to use the background-repeat attribute and background-position attribute. .

1. background-repeat attribute

The background-repeat attribute is used to set the repeat mode of the background image. It can take the following values:

• repeat : Default value, the background image will be repeated horizontally and vertically.
• repeat-x: Repeat in the horizontal direction only.
• repeat-y: Repeat only in the vertical direction.
• no-repeat: Do not display repeatedly.

For example, in the following code, set the background image to repeat only horizontally:

body {
  background-image: url(bg.jpg);
  background-repeat: repeat-x;
}

2. background-position property

## The #background-position attribute is used to set the starting position of the background image, which can take the following values:

top: The background image is displayed from the top.
• bottom: The background image is displayed from the bottom.
• center: The background image is displayed in the center.
• left: The background image is displayed from the left.
• right: The background image is displayed from the right.

Usually we can use the following method to set the background-position property:

body {
  background-position: x-axis y-axis;
}

Among them, x-axis and y-axis represent the offset from the left and top (specifically The value can be in units of pixels, percentages, etc.). If only one value is set, the default is the horizontal offset, and the vertical offset defaults to center alignment.

For example:

body {
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
}

In this example, set the background image to be non-repeating and display from the middle top.

3. Use the background-size attribute

The background-size attribute is used to set the size of the background image. Can take the following values:

auto: Default value, the background image is displayed in its original size.
• cover: Scale the background image to completely cover the element area (the background image may be cropped).
• contain: Make the background image as small as possible to fit completely within the element area (there may be some white space).
• Specify size: You can use pixels, percentages and other units to specify the size of the background image.

For example, in the following code, the background image is set to be as small as possible to completely fit the element area:

body {
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

Summary

By using the background attribute, we You can easily set the background image of your web page. Through the four attributes of background-image, background-repeat, background-position and background-size, we can set the path, repetition method, starting position and size of the image. Please use it flexibly according to your needs.

The above is the detailed content of How to set image background in html? Introduction to background properties. For more information, please follow other related articles on the PHP Chinese website!