css - @Media different devices -

css - @Media different devices -

this code:

/* 1366 ----------- */ @media (min-width : 1326px) , (max-width : 1639px){ body { background-image:url('http://evoxity.net/modules/themeconfigurator/img/bg768.jpg')!important; background-repeat:no-repeat!important; -moz-background-size:cover!important; -o-background-size:cover!important; background-size:fixed!important; background-position:center!important; background-attachment:fixed!important; } } /* 1680 ----------- */ @media (min-width : 1640px) , (max-width : 1800px){ body { background-image:url('http://evoxity.net/modules/themeconfigurator/img/bg1050.jpg')!important; background-repeat:no-repeat!important; -moz-background-size:cover!important; -o-background-size:cover!important; background-size:fixed!important; background-position:center!important; background-attachment:fixed!important; } } /* 1920 ----------- */ @media , screen (min-width : 1800px){ body { background-image:url('http://evoxity.net/modules/themeconfigurator/img/bg1200.jpg')!important; background-repeat:no-repeat!important; -moz-background-size:cover!important; -o-background-size:cover!important; background-size:fixed!important; background-position:center!important; background-attachment:fixed!important; } }

the 1920 working , if illustration drag windows bar 1 of sites automaticly rescaled , keeps middle container on background matching resize of website.

i tried 1680 res , website called "screenfly" there container stuck in middle thought still uses 1920 res since changes bg1050.jpg didnt alter anything.

than jumped 1366 because got notebook resolution result same. suggestions how other devices work 1920x1080 , 1920x1200 resolution?

you using !important tags because cannot override previous query. solve must utilize media queries in descending order according screen size. example:

@media screen , (max-width:900px){

//some code here

}

@media screen , (max-width:768px){

//some code here (codes write in here override codes previous media query 900px without using !important tags)

}

by doing can rid of !important tags. should utilize proper media queries this.

one illustration of proper media query structure: @media screen , (max-width:1080px)

css media-queries resolutions