How to edit background image size

CSS background-size Property

The background-size property is specifies the size of the background images. Also we are able to add custom size in this . this property have few values : auto , length ,  percentage ,  cover , contain , initial and inherit .

Example

Specify the size of a background image:

div {
    background: url('back-img.png');
    background-size: 50px 70px;
    background-repeat: no-repeat;
}

Property Values with Examples  : 

Background-size : Auto

It is default value auto , The background-image contains its original width and height 

div {
    background-image: url('back-img.png');

    background-size: auto;
    background-repeat: no-repeat;
}

Background-size : Cover

Set background-size value cover , Extend the background area to fully cover the content area 

Example

div {
    background-image: url('back-img.png');
    background-size: cover;
    background-repeat: no-repeat;
}

Background-size : 100% 100% 

Example

div {
    background-image: url('back-img.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

}

Background-size : Contain

Scale image to the largest size so that its width and height can fit inside the content area 

div {
    background-image: url('back-img.png');
    background-size: contain;
    background-repeat: no-repeat;

}

Background-size : Contain

Scale image to the largest size so that its width and height can fit inside the content area 

div {
    background-image: url('back-img.png');
    background-size: contain;
    background-repeat: no-repeat;
}


Background-size : Initial

Sets this property to its default value 

div {
    background-image: url('back-img.png');
    background-size: initial;
    background-repeat: no-repeat;
}


Background-size : Inherit

Receives this property from its original element 

div {
    background-image: url('back-img.png');
    background-size: inherit;
    background-repeat: no-repeat;
}