ciser/src/_background-position.css

Functional CSS, help quickly build and design new UI without writing css.

/*

    BACKGROUND POSITION

    Base:
    bg = background

    Modifiers:
    -center = center center
    -top = top center
    -right = center right
    -bottom = bottom center
    -left = center left

    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -ml = mobile landscape
      -l  = large

 */

.bg-center { 
  background-repeat: no-repeat;
  background-position: center center; 
}

.bg-top {    
  background-repeat: no-repeat; 
  background-position: top center;    
}

.bg-right {  
  background-repeat: no-repeat; 
  background-position: center right;  
}

.bg-bottom { 
  background-repeat: no-repeat; 
  background-position: bottom center; 
}

.bg-left {   
  background-repeat: no-repeat; 
  background-position: center left;   
}

@media screen and (min-width: 30em) {
  .bg-center-ns { 
    background-repeat: no-repeat;
    background-position: center center; 
  }

  .bg-top-ns {    
    background-repeat: no-repeat; 
    background-position: top center;    
  }

  .bg-right-ns {  
    background-repeat: no-repeat; 
    background-position: center right;  
  }

  .bg-bottom-ns { 
    background-repeat: no-repeat; 
    background-position: bottom center; 
  }

  .bg-left-ns {   
    background-repeat: no-repeat; 
    background-position: center left;   
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .bg-center-m { 
    background-repeat: no-repeat;
    background-position: center center; 
  }

  .bg-top-m {    
    background-repeat: no-repeat; 
    background-position: top center;    
  }

  .bg-right-m {  
    background-repeat: no-repeat; 
    background-position: center right;  
  }

  .bg-bottom-m { 
    background-repeat: no-repeat; 
    background-position: bottom center; 
  }

  .bg-left-m {   
    background-repeat: no-repeat; 
    background-position: center left;   
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .bg-center-ml { 
    background-repeat: no-repeat;
    background-position: center center; 
  }

  .bg-top-ml {    
    background-repeat: no-repeat; 
    background-position: top center;    
  }

  .bg-right-ml {  
    background-repeat: no-repeat; 
    background-position: center right;  
  }

  .bg-bottom-ml { 
    background-repeat: no-repeat; 
    background-position: bottom center; 
  }

  .bg-left-ml {   
    background-repeat: no-repeat; 
    background-position: center left;   
  }
}

@media screen and (min-width: 60em) {
  .bg-center-l { 
    background-repeat: no-repeat;
    background-position: center center; 
  }

  .bg-top-l {    
    background-repeat: no-repeat; 
    background-position: top center;    
  }

  .bg-right-l {  
    background-repeat: no-repeat; 
    background-position: center right;  
  }

  .bg-bottom-l { 
    background-repeat: no-repeat; 
    background-position: bottom center; 
  }

  .bg-left-l {   
    background-repeat: no-repeat; 
    background-position: center left;   
  }
}