Lesson 28-CSS3 Background and Gradient

Background and Gradient

background-size

The background-size property sets the size of the background image. You can specify absolute or relative units, or use keywords to control the size of the background image within the element’s background area.

.element {
    background-size: [length | percentage | cover | contain] | [length | percentage] [length | percentage] | auto | inherit;
}

.element {
    background-size: [length | percentage | cover | contain] | [length | percentage] [length | percentage] | auto | inherit;
}

• length or percentage: Specify the width and height of the background image using pixel values ​​or percentages relative to the element’s width/height, respectively.
• cover: The background image will be scaled as much as possible to completely cover the background area, some portions may be cropped to fit the container size.
• contain: The background image will be scaled as much as possible to completely fit the background area, maintaining the image’s aspect ratio, but all portions of the image will show through, possibly leaving white space.
• auto: The background image retains its original size.
• When two values ​​are provided, the first corresponds to the width and the second to the height.

.scaled-background {
    background-image: url("image.jpg");
    background-size: cover; /* The image adapts to the container size and may be cropped */
}

.tiled-background {
    background-image: url("pattern.png");
    background-size: 20px 20px; /* The image is tiled at 20x20 pixels */
}

.scaled-background {
    background-image: url("image.jpg");
    background-size: cover; /* The image adapts to the container size and may be cropped */
}

.tiled-background {
    background-image: url("pattern.png");
    background-size: 20px 20px; /* The image is tiled at 20x20 pixels */
}

background-origin

The background-origin property determines the starting point of the background image positioning, that is, the position relative to which the background image is calculated background-position. Its value can be:

• padding-box: The default value, the background image starts from the padding area.
• border-box: The background image starts from the border area.
• content-box: The background image starts from the content area.

.border-box-background {
    background-image: url("image.jpg");
    background-origin: border-box; /* The image starts at the border area */
}

.border-box-background {
    background-image: url("image.jpg");
    background-origin: border-box; /* The image starts at the border area */
}

background-cli

The background-clip property specifies the area where the background (including color and image) is drawn. Its values ​​can be:

• border-box: The background extends to the outer edge of the border (including the border).
• padding-box: The background extends to the outer edge of the padding (excluding the border). This is the default behavior.
• content-box: The background is limited to the content area.

.content-box-background {
    background-color: #f00;
    background-image: url("image.jpg");
    background-clip: content-box; /* Background is limited to the content area, borders and padding are displayed as transparent */
}

.content-box-background {
    background-color: #f00;
    background-image: url("image.jpg");
    background-clip: content-box; /* Background is limited to the content area, borders and padding are displayed as transparent */
}

background-blend-mode

The background-blend-mode property defines how the current layer background image is blended with the next layer background (including color and image). It accepts multiple blending mode keywords, such as:

• normal: default value, no special blending effect.
• multiply
• screen
• overlay
• darken
• lighten
• color-dodge
• saturation

.blended-background {
    background-color: #f00;
    background-image: url("image.jpg");
    background-blend-mode: multiply; /* Background color and image blended in "multiply" mode */
}

.blended-background {
    background-color: #f00;
    background-image: url("image.jpg");
    background-blend-mode: multiply; /* Background color and image blended in "multiply" mode */
}

linear-gradient()

Creates a linear gradient that starts from one straight line and ends at another straight line.

.linear-gradient-background {
    background: linear-gradient(to right, #ff0000, #00ff00);
}

.linear-gradient-background {
    background: linear-gradient(to right, #ff0000, #00ff00);
}

radial-gradient()

Creates a radial gradient that starts from a center point and spreads outward.

Example:

.radial-gradient-background {
    background: radial-gradient(circle, #ff0000, #00ff00);
}

.radial-gradient-background {
    background: radial-gradient(circle, #ff0000, #00ff00);
}

repeating-linear-gradient()

The function is used to create a linear gradient that repeats along a specified axis.

repeating-linear-gradient(
[ <angle> | to <side-or-corner> ]? ,
<color-stop>[, <color-stop>]+
)

repeating-linear-gradient(
[ <angle> | to <side-or-corner> ]? ,
<color-stop>[, <color-stop>]+
)

.repeating-linear-gradient-background {
    background: repeating-linear-gradient(
        45deg, /* Angle value, indicating the direction of the gradient line */
        red 0%, /* The first color stop point, red, starts from 0% */
        yellow 25%, /* The second color stop point, yellow, starts from 25% */
        blue 50%, /* The third color stop point, blue, starts from 50% */
        green 75% /* The fourth color stop point, green, starts from 75% */
    );
}

.repeating-linear-gradient-background {
    background: repeating-linear-gradient(
        45deg, /* Angle value, indicating the direction of the gradient line */
        red 0%, /* The first color stop point, red, starts from 0% */
        yellow 25%, /* The second color stop point, yellow, starts from 25% */
        blue 50%, /* The third color stop point, blue, starts from 50% */
        green 75% /* The fourth color stop point, green, starts from 75% */
    );
}

repeating-radial-gradient()

Used to create a repeating radial gradient, that is, a gradient that spreads outward from a center point

    repeating-radial-gradient(
    [ <ending-shape> || <size> ]? [ at <position> ]? ,
    <color-stop>[, <color-stop>]+
    )

    repeating-radial-gradient(
    [ <ending-shape> || <size> ]? [ at <position> ]? ,
    <color-stop>[, <color-stop>]+
    )

.repeating-radial-gradient-background {
    background: repeating-radial-gradient(
        circle closest-side, /* The shape is a circle, and the size is the length of the closest border */
        red 0%, /* The first color stop point, red, starts from 0% */
        yellow 25%, /* The second color stop point, yellow, starts from 25% */
        blue 50%, /* The third color stop point, blue, starts from 50% */
        green 75% /* The fourth color stop point, green, starts from 75% */
    );
}

.repeating-radial-gradient-background {
    background: repeating-radial-gradient(
        circle closest-side, /* The shape is a circle, and the size is the length of the closest border */
        red 0%, /* The first color stop point, red, starts from 0% */
        yellow 25%, /* The second color stop point, yellow, starts from 25% */
        blue 50%, /* The third color stop point, blue, starts from 50% */
        green 75% /* The fourth color stop point, green, starts from 75% */
    );
}