[CSS3] CSS Background Images

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: 0;
        margin: 0;
        width: 0;
      }
    }

 

Using CSS background images for alternative images

body {
      align-items: center;
      display: flex;
      height: 100vh;
      justify-content: center;
      margin: 0;
    }
    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);
      }
    }