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