ciser
Version:
Functional CSS, help quickly build and design new UI without writing css.
35 lines (30 loc) • 1.02 kB
CSS
/*
BACKGROUND SIZE
Docs: http://tachyons.io/docs/themes/background-size/
Media Query Extensions:
-ns = not-small
-m = medium -ml = mobile landscape
-l = large
*/
/*
Often used in combination with background image set as an inline style
on an html element.
*/
.cover { background-size: cover ; }
.contain { background-size: contain ; }
@media screen and (min-width: 30em) {
.cover-ns { background-size: cover ; }
.contain-ns { background-size: contain ; }
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.cover-m { background-size: cover ; }
.contain-m { background-size: contain ; }
}
@media screen and (max-width: 60em) and (orientation: landscape) {
.cover-ml { background-size: cover ; }
.contain-ml { background-size: contain ; }
}
@media screen and (min-width: 60em) {
.cover-l { background-size: cover ; }
.contain-l { background-size: contain ; }
}