CSS Background Property

Background-Color

Change the background color of any element.

p{
    background-color: lightblue;
}

Background-Image

Set image in background of html element.

div{
    background-image: url("image.png");
}

CSS Gradient and It's Types

CSS3 provides several types of gradients that can be used to add smooth transitions between colors on a page. The most commonly used types of gradients are:

1. Linear Gradients: These are gradients that transition along a straight line. They can be defined using the linear-gradient function and can be angled in any direction. For example:

linear-gradient() is used to Change the background of any element. it is like background images property. Syntax is here

div{
    height: 400px;
    width: 600px;
    /* color and percentage  */
    background: linear-gradient(orange 30%, green 70%);
}

Gradient directions

Change the direction of gradient colors.

div {
    height: 400px;
    width: 600px;
    /*   right to left */
    background: linear-gradient(to left, orange, green);
    /*   left to right */
    background: linear-gradient(to right, orange, green);
    /*   bottom to top */
    background: linear-gradient(to top, orange, green);
    /*   top to bottom */
    background: linear-gradient(to bottom, orange, green);
}

Gradient with diagonal and Angle

div{
    /*  top left to bottom right    */
background: linear-gradient(to bottom right, orange, green);
/*  top left to bottom left    */
background: linear-gradient(to bottom left, orange, green);

}

div {
    /* to right */
    background: linear-gradient(90deg, orange, green);
    /* to bottom */
    background: linear-gradient(180deg, orange, green);
}

div {
    /* repeating linear gradient with color percentage */
    background: repeating-linear-gradient(green 10%, blue 20%, yellow 30%);
}

Radial Gradient

2. Radial Gradients: These are gradients that transition in a circular fashion, with the colors radiating out from a central point. They can be defined using the radial-gradient function. For example:

div {
    /* radial gradient with shape */
    background: radial-gradient(circle, red, blue);
    background: radial-gradient(ellipse, red, blue);
}

div {
    /* repeating radial gradient with color percentage */
    background: repeating-radial-gradient(red 5%, blue 10%);
}

Background-Size

background-size property is used to adjust the size of background Or inserted image as background

div{
    background-image: url("image.png");
    background-size: contain;
    background-size: cover;
    background-size: 0vmax;
    background-size: 0vmin;
}

Background-Position

Set the background position of inserted background image.

div{
    background-image: url("image.png");
    background-position: center;
    background-position: top;
    background-position: left;
    background-position: right;
    background-position: bottom;
}

Background-Repeat

background-repeat property is used to repeat the background-image if image is small of its parent element. repeat Horizontal direction or vertical direction as your need. we can remove the repeat property.

div{
    background-image: url("image.png");
    background-repeat: no-repeat;
    background-repeat: repeat;
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-repeat: round;
}

Background-Attachment

background-attachment is define what should be the behaviour of background item.

div{
    background-attachment: fixed;
    background-attachment: scroll;
}

---