Body with background image and gradient
html {
background: linear-gradient(#000, white) no-repeat;
height: 100vh;
}
Body with elaborate background using only CSS
background-image: url("img_tree.gif"), url("paper.gif");
Using CSS background images for conditional image display
div.koala {
background-image: url(koala.jpg);
}
div.photo {
background-size: cover;
float: left;
margin: 0 2vw 1vw 0;
height: 50vw;
position: relative;
top: 3px;
transition: all 0.5s;
width: 50vw;
}
@media screen and (max-width: 500px) {
div.photo {
background-image: none;
height:;
margin:;
width:;
}
}
Using CSS background images for alternative images
body {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
margin:;
}
div {
background-image: url(koala.jpg);
background-size: cover;
height: 50vw;
transition: background-image 2s;
width: 50vw;
}
@media screen and (max-width: 500px) {
div {
background-image: url(koala_crop.jpg);
}
}