Background images size CSS

The most commonly used background image CSS

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod eempor incididunt ut.

div {
    background-image: url(bulb.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

Responsive background image CSS

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod eempor incididunt ut.

div {
    background-image: url(bulb.jpg);
    background-repeat: no-repeat;
    background-size: contain; /* makes the bg image responsive */
    background-position: center;
}

Fixed background image (parallax)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod eempor incididunt ut.

div {
    background-image: url(bulb.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* makes the bg image fixed */
}

More sizes for background image that you can explore

div {
    background-size: auto;
    background-size: 1920px 1080px;
    background-size: 100% 60%;
    background-size: cover;
    background-size: contain;
    /* use any one from above */
}