android - HTML site image background showing error on iPhone -
i build html website showing on mobile device, while there's no problem showing image background on android device galaxy s4 this(the profile showing!) , on other hand, profile background not showing correctly . had adjust background-size on, vain. css code below:
@media screen , (max-device-width: 640px) {
.hrader-part{
background: url(../images/bg_android.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; padding-bottom: 2em; width: 200px; height: 300px } }
@media screen , (max-device-width: 1080px) {
.hrader-part{
background: url(../images/bg_android.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; padding-bottom: 2em; width: 365px; height: 100% } }
thanks lot buddies!
i not have access iphone, able reproduce bug in safari 7 on mac os x, using iphone user agent. css media query not being applied element. changing max-device-width
max-width
fixed problem.
also regarding media queries: max-device-width: 1080px
query overrides themax-device-width: 640px
query, since comes later in stylesheet. if add min-width
attribute second media query, allow both queries function:
@media screen , (min-width: 641px) , (max-width: 1080px)
Comments
Post a Comment