The CSS background

preface

Background has many sub-attributes, but usually uses background-color, background-image and background-repeat. With other attributes, you’re not familiar with them, you have to document them every time you use them and you’re not sure if they’re appropriate. Take this little book learning opportunity, let me take a good wisp.

First, basic knowledge

1.1 child attributes

Background-position: the starting position of the background image. Default: 0%.

/* position: the second position is not declared. The default is 50% */
background: 100px 100px;
/* Keyword: the second position is not declared. The default is center */
background: left top;
Copy the code

Background-size: indicates the background image size mode. By default, auto automatically sets the size.

/* Size: The second size is not declared. The default is auto */
background-size: 100px 100px;
/* The image expands to a size large enough to cover the entire area. Some parts of the image may not be displayed in the area */
background-size: cover;
/* The image expands to the maximum size so that its width and height fully fit the entire area */
background-size: contain;
Copy the code

Background-origin: positioning area, default padding-box, image relative filling positioning.

/* Image position relative to border */
background-origin: border-box;
/* Image relative to content */
background-origin: contenet-box;
Copy the code

Background-clip: Draws the area, default border-box, the image is clipped to the border and margin.

/* The image is cropped to the border between the fill and the border */
background-clip: padding-box;
/* The image is clipped to the border between the content and the fill */
background-clip: content-box;
Copy the code

Background-attachment: image attachment mode, default scroll, image will move with page scrolling.

/* The image does not move as the page scrolls */
background-attachment: fixed;
Copy the code

1.2 shorthand

There is no mandatory background subattribute concatenation order.

1.2.1 Position and size are connected by /

Since both position and size can use length units as values, the general format position/size is used.

.elem {
    background: center/100px 100px;
}
Copy the code

If only one length unit appears, the default declaration is Position.

/* background-position: start position of the background image */
.ele {
    background: 100px 100px;
}

/* background-size: background image size */
.ele {
    background-size: 100px 100px;
}
Copy the code

1.2.2 Origin and Clip cannot be added to attribute concatenation

Because they have the same value. Browsers can’t tell the difference.

Second, effect realization

2.1 Flexible background positioning

If the background image needs to be offset based on the bottom right corner of the container, CSS2 requires us to calculate the offset of the background image from the top left corner and then assign the value to background-Position. CSS3 supports specifying keywords in front of offsets.

background: red url(".. /assets/images/dect_mgt.jpg") no-repeat bottom 20px right 20px;
Copy the code

2.2 Fringe Background

If multiple color codes have the same location, they produce an infinitesimal transition region with the first and last specified values as the starting and ending colors. In effect, the color changes suddenly at that point, rather than a smooth gradient.

background: linear-gradient(rgb(221.184.184) 50%.rgb(103.103.179) 50%);
background-size: 100% 10px;
Copy the code

If the position value of a color label is smaller than the position value of the color label before it in the entire list, the color label position value is set to the maximum value of all color label positions before it.

Based on this, the following code can achieve the same effect.

background: linear-gradient(rgb(221.184.184) 50%.rgb(103.103.179) 0);
background-size: 100% 10px;
Copy the code

2.3 Complex background pattern

Use CSS gradients and background-image to create any kind of geometric pattern.

/ * * / wave point
background: # 000;
background-image: radial-gradient(#fff 30%, transparent 0), radial-gradient(#fff 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0.15px 15px;
Copy the code

Using conic-gradient to achieve checkerboard layout, more convenient than linear gradient.

/ * * / board
background: #eee;
background: repeating-conic-gradient(#bbb 0.#bbb 25%.#eee 0.#eee 50%);
background-size: 30px 30px;
Copy the code

2.4 Multiple Backgrounds

Mask the picture.

background: 
    linear-gradient(135deg.rgba(88.90.84.0.5),rgba(73.77.71.0.5)),url(".. /assets/images/dect_mgt.jpg") center/cover no-repeat;
Copy the code

2.5 Dynamic gradient background

Excerpted from a pamphlet.

Declare linear-gradient() to produce a gradient effect from the upper left corner to the lower right corner, position the background on the left, and control the background positioning left and right to hover through animation to produce a dynamic gradient background.

.gradient-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: linear-gradient(135deg.#f66.#f90.#3c9.#09f.#66f) left center/400% 400%;
    font-weight: bold;
    font-size: 100px;
    color: #fff;
    animation: move 10s infinite;
}
@keyframes move {
    0%.100% {
        background-position-x: left;
    }
    50% {
        background-position-x: right; }}Copy the code

conclusion

If you really understand the properties and usage of CSS backgrounds, you can really paint as a canvas.

  • References:
    • Playing with the Artistic Beauty of CSS
    • CSS Revealed
    • How to display text as CSS background image?

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event.