This is the 31st day of my participation in the August Text Challenge.More challenges in August

Author: battleKing warehouse: Github, CodePen blog: CSDN, nuggets feedback email: [email protected] Special statement: original is not easy, shall not be reproduced without authorization or plagiarism, if need to be reproduced can contact the author authorized

background

In the process of learning CSS, you will certainly encounter a background image does not know how to quickly locate the problem, but most basic CSS tutorials do not mention how to solve this problem, so today we will use this article to quickly solve the problem.

The relevant knowledge

Let’s start by explaining which CSS properties are most relevant to the background image.

1. The background – the image attributes

The background-image property is used to introduce the background image.

background-image: url('https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/6bdafd801c878b10edb5fed5d00969e9.svg')
Copy the code

2. Background – repeat attributes

The background-repeat property specifies how to repeat the background image, usually set to no-repeat.

  • An optional value
value describe
repeat The default. The background image is repeated vertically and horizontally.
repeat-x The background image will repeat horizontally.
repeat-y The background image will repeat vertically.
no-repeat The background image will be displayed only once. 
background-repeat: no-repeat;
Copy the code

3. The background – the size attribute

Background-size specifies the size of the background image

  • An optional value
value describe
length Sets the height and width of the background image. The first value sets the width, and the second value sets the height. If only one value is set, the second value is set to” auto”.
percentage Sets the width and height of the background image as a percentage of the parent element. The first value sets the width, and the second value sets the height. If only one value is set, the second value is set to” auto”.
cover Expand the background image to a large enough size to completely cover the background area. Some parts of the background image may not be displayed in the background location area.
contain Expand the image image to its maximum size so that its width and height fully fit the content area.

3. The background – position attribute

The background-position property specifies the position of the background image

The three attribute values of background-position attribute correspond to the three methods of background image positioning

  1. Keywords: background-position: top right bottom left;

  2. Pixel: background-position: 0px 0px;

  3. Background-position: 0%;

The keyword

Top, right, bottom, and left after background-position indicate that the background image is close to a certain edge of the container.

Background-position: top left; Indicates that the background image is positioned in the upper left corner of the container

pixel

The first PX after background-position represents the horizontal offset of the background image relative to the upper left corner of the container. The second PX represents the vertical offset of the background image relative to the upper left corner of the container.

Background-position: 0px 0px; Indicates that the background image is positioned in the upper left corner of the container

The percentage

The two x% and y% after backth-position indicate that the background image itself is offset x% horizontally with respect to the upper left corner. The points offset y% vertically are aligned with the points offset X % horizontally with respect to the upper left corner and y% vertically with respect to the container of the background image

Assume background-position: 20% 20%;

conclusion

  1. background-position: 0px 0px;It does not adapt to the window size.
  2. background-position: top left 和 background-position: x% y%The advantage is that the background image can be adjusted automatically according to the size of the window.
  3. So we shouldChoose which way to go according to the specific situationTo locate the image.

❤️ thank you

If this article is helpful to you, please support it by clicking a “like”. Your “like” is my motivation for writing.

If you like this article, you can “like” + “favorites” + “forward” to more friends.