ciser/build/ciser.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; }
}