1.backgrounds {
2    position: absolute !important; /* not in the normal flow */
3    right: 0;
4    bottom: 0;
5    margin: 0 !important;
6    padding: 0 !important;
7    overflow: hidden;
8    width: 100%;
9    height: 100%;
10    -webkit-backface-visibility: hidden;
11    backface-visibility: hidden;
12    transform: translate3d(0px, 0px, 0px);
13    -webkit-transform-style: preserve-3d;
14    transform-style: preserve-3d;
15}
16
17.background {
18    position: absolute !important; /* not in the normal flow */
19    height: 100%;
20    width: 100%;
21    background-size: cover; /* scale the background image proportionally so that its width and height are equal to, or greater than, the width/height of the element. */
22    background-position: center center; /* better for responsive background */
23    /* background-attachment: fixed; !* fixed will attach the background to a fixed position on the page (sane as fixed position) *!*/
24    background-attachment: scroll;
25    /* the background will scroll with the content
26    /* background-attachment: local; !* the background will scroll with the content *!*/
27    /* background-color: #464646; /* the color while the image is loading or the transparent-color if any */
28    -webkit-backface-visibility: hidden;
29    backface-visibility: hidden;
30    transform: translate3d(0px, 0px, 0px);
31    -webkit-transform-style: preserve-3d;
32    transform-style: preserve-3d;
33}
34
35/* For a image */
36.background-img {
37    position: absolute !important; /* not in the normal flow */
38    width: 100%;
39    height: 100%;
40    object-fit: cover;
41}
42