Background family properties are CSS properties that we often use to control the style of the background, but there are a lot more details about background properties, so let’s look at them.

Background family attributes include:

attribute describe CSS
background-color Sets the background color. 1
background-position Set up thebg-imageThe location of the. 1
background-size Set up thebg-imageThe size of the. 3
background-repeat How and whether to repeatbg-image. 1
background-origin Set up thebg-imageThe positioning base point of. 3
background-clip Limit * *The entire backgroundThe drawing area of **. 3
background-attachment provisionsbg-imageWhether to scroll along the page. 1
background-image Sets the background image to use. 1

Of course, background is a compound property, and you can configure all the properties described above at once. Note that some configuration items have the same unit. In order to be recognized by the browser, the following format should be followed when configuring bG-position and BG-size using the background property:

background: positionX positionY / width height
Copy the code

For example, background: 0px 0px / 100px 100px means that the background is positioned in the top left corner (default is based on the inner margin box) and the size is 100px wide and high.

The following details the background family attributes 👇

background-color

Background-color Sets the background color:

  • The value can be: English word, RGB, RGBA, # starting with a 6-digit hexadecimal
  • Level is lower thanbackground-image

In the following example, set bg-color and bg-img at the same time. It can be found that bg-img overcovers bg-color.

<style>
.box {
  width: 400px;
  height: 200px;
  border: 8px dashed white;
  color: white;
  background-color: #5758bb;
  background-image: url("./imagePath/xxx.png");
  background-size: 80px;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-clip: content-box;
}
p {
  font-size: 24px;
  padding: 10px;
}
</style>
<body>
  <div class="box">
    <p>Ashuntefannao</p>
    <p>Ashun</p>
  </div>
</body>
Copy the code

background-position

Background-position Sets the position of the BG-image. Default value: 0% 0%.

value describe
top center bottom / left right center If only one keyword is set, the second value will be “center”.
x% y% The first value is horizontal and the second value is vertical. The top left corner is 0%, 0%. The bottom right hand corner is 100%, 100%. If only one value is set, the other value will be 50%.
xpos ypos The first value is horizontal and the second value is vertical. The top left corner is 0, 0. The units are pixels (0px 0px) or any other CSS units. If only one value is set, the other value will be 50%.

It is worth noting:

  • The three value types can be mixed
  • Can matchbackground-originControl the base point for positioning

background-size

Background-size Controls the size of background-image.

value describe
width height Set the height and width of the background image respectively. 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”. The unit can bepx %If, for%Is the width relative to the parent element.
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.

Figure example:

In order to make it more intuitive, background-repeat: no-repeat is applied. The following details are explained 👇

background-repeat

Background-repeat specifies how and whether to repeat bG-image, and its specific values are as follows:

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.
inherit Specifies that the background-repeat property should be inherited from the parent element.

By default, when the default value repeat is applied:

  • whenbg-imageIf the size of the box is smaller than the box size, the repeat effect will be displayed automatically.
  • ifbg-imageThe size is greater than the box size when passingbg-positionAnd repeated effects can also be observed.
    • For example, set the box width and height to 200px and the background image width and height to 400pxbg-position: 1200px 1200pxAlthough the positioning effect has far exceeded the width and height of the background image, the default isrepeatMode and background images are still displayed.

background-origin

This attribute can be used to change the positioning base point of background-position. Specifically, its value is as follows:

value describe
padding-box The default. The background image is positioned relative to the inner margin box.
border-box The background image is positioned relative to the border box.
content-box The background image is positioned relative to the content box.

Example:

Based on the code

.box {
  width: 200px;
  height: 200px;
  border: 8px dashed # 718093;
  color: white;
  background-color: #40739e;
  background-image: url("./imagePath/xxx.png");
  background-size: 100px;
  background-repeat: no-repeat;
  
  background-position: 0px 0px; .padding: 40px; // Set the inner margin to reflectbackground-origin: content-box effect}Copy the code

  • background-origin: padding-box

  • background-origin: border-box

  • background-origin: content-box

background-clip

Background-clip: limits the drawing area of ** the entire background **.

value describe
border-box (The default value) The entire background is cropped to the border box.
padding-box The entire background is cropped to the inside margin box.
content-box The entire background is cropped to the content box.
text The entire background is cropped to the top of the text area.

It is worth noting:

  • background-originIs thebg-imageIs limited without affectingbg-color.
  • butbackground-clipWill limit * *The entire background**, that is, this property is set to affect all background elements, includingbg-colorwithbg-image

Example:

.box {
  width: 200px;
  height: 500px;
  border: 8px dashed #00cec9;
  color: white;
  background-color: #40739e;
  background-image: url("./imagePath/xxx.png");
  background-size: 100%;
  padding: 20px;
  background-repeat: repeat-y;
  /* background-clip: content-box; * / 
  background-origin: content-box;
}
Copy the code

It can be seen that not only the background image is displayed, but also the background color. Because background-origin is only the positioning constraint of the BG-image, it can be seen that there is a gap at both ends of the background image, thus showing the BG-color.

If the comment code is uncommented, that is, backbackground clip: Content-box is set to constrain the entire background area, and the BG-color is no longer displayed (overwritten by bG-image).

background-clip: text

This is an interesting property that can be used to crop the background to the top of the text, and only in the text, the rest of the text does not show the background, it can be used to do the following example:

Key code:

color: transparent;
background-clip: text;
-webkit-background-clip: text;
Copy the code

background-attachment

Background-attachment is used to set the attachment mode of background-image, that is, whether bG-image scrolls with the whole page rather than relative to its own element.

Its attribute values can be:

value describe
scroll The default value. The background image moves as the rest of the page scrolls.
fixed When the rest of the page scrolls, the background image does not move.
inherit Specifies that the background-attachment property should be inherited from the parent element.

  • In the following example, the effect of background-attachment: fixed is set in the left figure. It can be found that bG-image does not scroll with page scrolling, which is equivalent to absolute positioning relative to body.

  • On the right is the default scroll value, which is the common effect. Bg-image will scroll along with the page, which is equivalent to fixed position relative to the body.

​

background-image

Many of the book properties described above are used to control background-image. In real development, we might only use the basic function (setting the background image), but in fact it can also do gradient effect.

Its attribute values can be as follows:

value describe
none The default value. The background image is not displayed.
url(“imagePath”) Path to the image.
linear-gradient() Create a linear gradient “image”, (default orientation:From top to bottom)
radial-gradient() Create radial gradient “image”. (Default direction:Center to edge)
repeating-linear-gradient() Create a repeated linear gradient “image”.
repeating-radial-gradient() Create a repeated radial gradient “image”.

It is worth noting:

Multiple values can be set for background-image, and the above attribute values can be mixed and configured repeatedly. All configured background images can be displayed. The level decreases with the configuration order, that is, the layer nearest to the user is the first attribute value of background-image.

If multiple attribute values are configured and the first layer image has no transparency, the lower layer image will not be displayed. This is easy to understand, equivalent to the first layer image blocking the image of the following layer.

We can use this feature to show different interesting effects:

.box {
  width: 200px;
  height: 500px;
  border: 8px dashed rgba(162.155.254.1);
  color: white;
  background-image: repeating-linear-gradient(// first layer imagergba(255.255.255.0.8),
      rgba(250.177.160.0.8),
      rgba(85.239.196.0.8),
      rgba(116.185.255.0.8) 20px
    ),
    url("./imagePath/xxx.png"); // Second layer imagebackground-size: 100%;
  padding: 20px;
  background-repeat: repeat-y;
  background-clip: content-box;
  background-origin: content-box;
}
Copy the code

Add another layer:

 background-image: repeating-linear-gradient(// first layer imagergba(255.255.255.0.8),
            rgba(250.177.160.0.8),
            rgba(85.239.196.0.8),
            rgba(116.185.255.0.8) 1px
          ),
          repeating-radial-gradient(// Second layer imagergba(0.0.0.1),
            rgba(250.177.160.1),
            rgba(85.239.196.0.1),
            rgba(116.185.255.0.1) 4px
          ),
          url("./imagePath/xxx.png"); // Layer 3 imageCopy the code

Let’s look at each property in detail 👇

url(“imagePath”)

You can use this property to set a specific background image. You only need to pass in the path of the image.

  • When setting a multi-layer image, make sure that the image has transparency, otherwise it will overwrite the lower image

linear-gradient()

Create an “image” with a linear gradient (default orientation: top down), by passing in each color and setting where each color ends.

The syntax is:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...) ;Copy the code

Possible values are: direction

  1. to direction
    • In order toto At the beginning, followed by a gradient direction
    • The gradient direction is:top,bottom,left,right. And can be combined in pairs for gradient tilt direction
    • Such as:to bottom(Default value),to top right (From bottom left to top right)
  2. deg
    • Set the Angle of the specific gradient, for example:45deg

Color-stop can be:

This parameter has two parts: color and termination position. End position: The position where the color ends and where the next color begins the gradient.

  • Color can be: English word, RGB, RGBA, # start with six – digit hexadecimal.
  • The end location can be a value
    • It can be pixel specificpx
    • Settable percentage%Relative to the size of the box
    • When the stop position is not set, the colored blocks are automatically divided evenly

Such as:

The gradient goes from left to right, starts with pink, ends with red and ends at the end of the box.

background-image: linear-gradient(to right, pink, red 100%);
Copy the code

No matter how complex the case of linear gradient is, it also conforms to the logic described above and only needs simple analysis.

radial-gradient()

Create radial gradient “image”. (Default direction: center to edge), its syntax is as follows:

background-image: radial-gradient(shape size at position, start-color, ... , last-color);Copy the code

Specific parameters:

The order value describe
1 shape Set the radial gradient shape
1 size Define the radius length of the gradient
1 position Define the position of the gradient
2~n start-color, … , last-color Used to specify the start and end colors of the gradient. Use the samelinear-gradient()

The first parameter contains three parts: shape, size, and position

shape

  • ellipse (The default): Specifies the radial gradient of the ellipse
  • Circle: Specifies the radial gradient of the circle

size

  • farthest-corner (The default) : Specifies that the radius length of the radial gradient is from center to off-centerAs far as the Angle
  • Closest -corner: Specifies the radial gradient radius length from the center to off-centerThe Angle of the recent
  • Apel-side: Specifies that the radius of the radial gradient is from center to off-centerAs far as the edge
  • Closest -side: Specifies the length of the radial gradient radius as from the center to off-centerThe edge of the recent

position

  • In order toatAt the beginning, followed by a gradient position
  • Gradient position
    • Center (The defaultSet) :In the middleIs the ordinate value of the center of the radial gradient circle.
    • It can also be set to:top,bottom,left,right

Example:

The shape of the gradient is round, and the length of the gradient radius is from the center of the circle to the corner nearest the center of the circle, and the end color is white and ends at 250% of the width of the box.

.box {
  	width: 100px;
  	height: 90px;
  	background-image: radial-gradient(
            circle closest-corner at right,
            #00cec9.#81ecec.#74b9ff.#0984e3.#dfe6e9,
            white 250%
        );
}
Copy the code

Radial gradients are relatively complicated, but they all follow the logic described above. You only need to analyze the parameters.

Repeat gradient

The gradient can be set repeatedly, corresponding to two attribute values: repeating-Linear-gradient () and repeating-radial gradient(). The linear and radial gradient effects can be set repeatedly respectively.

The parameters are used the same as setting the gradient individually, but to repeat the gradient you must: set the end position of the trailing element < box size.

This makes sense, because if the color at the end of the gradient is greater than or equal to the box size, the gradient will cover the entire box and there will be no repetition of the gradient.

Specific cases can be referred to above (at the beginning of background-image).

The last

Background seems very simple, but it actually contains a lot of details, which can be combined with the knowledge learned before to create a very cool effect through diversified thinking

This is the end of this article, I hope to help you, I am Ashun, a college student, determined to become a senior front-end engineer, welcome to communicate and learn together. Please stay tuned for more updates

Original article, writing is limited, talent and learning shallow, if the article is not straight, speed to inform.