wilded
2/1/2018 - 10:38 AM

adapting background images to screen resolutions in CSS

adapting background images to screen resolutions in CSS

@media (max-width: 320px) {
            body {
              background-image: url('images/background_320.jpg'); opacity: 0.5;             
              background-repeat:no-repeat;
            }
          }
          @media (min-width: 321px) and (max-width: 1023px) {
            body {
              background-image: url('images/background_1024.jpg');  opacity: 0.5;             
              background-repeat:no-repeat;
            }
          }
          @media (min-width: 1024px) and (max-width: 1279px) {
            body {
              background-image: url('images/background_1024.jpg');              
              background-repeat:no-repeat;
            }
          }
          @media (min-width: 1280px) and (max-width: 1365px) {
            body {
              background-image: url('images/background_1280.jpg');  opacity: 0.5;             
              background-repeat:no-repeat;
            }
          }
          @media (min-width: 1366px) {
            body {
              background-image: url('images/background_1920.jpg'); opacity: 0.5;              
              background-repeat:no-repeat;
            }
          }