CSS background-size cover replacement for Mobile Safari

Question

Hi I have several divs on my page which have background images that I want to expand to cover the entire div which in turn can expand to fill the width of the viewport   Obviously background-size  cover behaves unexpectedly on iOS devices  I ve seen some examples of how to fix it  but I can t make them work in my situation  Ideally I d prefer not to add extra  lt img gt  tags to the HTML but if it s the only way then I will   Here is my code    x000D   x000D   section   x000D    margin  0 auto  x000D    position  relative  x000D    padding  0 0 320px 0  x000D    width  100   x000D    x000D   x000D   section1   x000D    background  url      50  0 no-repeat fixed  x000D    background-size  cover  x000D    x000D   x000D   section2   x000D    background  url      50  0 no-repeat fixed  x000D    background-size  cover  x000D    x000D   x000D   section3   x000D    background  url      50  0 no-repeat fixed  x000D    background-size  cover  x000D    x000D   lt body gt  x000D     lt div id  section1  class  section  gt  x000D          x000D     lt  div gt  x000D     lt div id  section2  class  section  gt  x000D          x000D     lt  div gt  x000D     lt div id  section3  class  section  gt  x000D          x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    The question is  how can I get the background image to completely cover the section div  taking into account the variable width of the browser and the variable height of the content in the div

User · Answer

I found the following on Stephen Gilbert's website - http://stephen.io/mediaqueries/. It includes additional devices and their orientations. Works for me!

Note: If you copy the code from his site, you'll want to edit it for extra spaces, depending on the editor you're using.

/*iPad in portrait & landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */}

/*iPad in landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */}

/*iPad in portrait*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }

User · Answer

That its the correct code of background size     lt div class  html-mobile-background  gt   lt  div gt         lt style type  text css  gt  html          Whatever you want       html-mobile-background       position  fixed      z-index  -1      top  0      left  0      width  100       height  100      To compensate for mobile browser address bar space        background  url YOUR BACKGROUND URL HERE  no-repeat    center center fixed   -webkit-background-size  cover  -moz-background-size  cover  -o-background-size  cover  background-size  cover   background-size  100  100     lt  style gt

User · Answer

html body     background  url  assets images header-bg jpg  no-repeat top center fixed    width  100     height  100     min-width  100     min-height  100      -webkit-background-size  auto auto    -moz-background-size  auto auto    -o-background-size  auto auto    background-size  auto auto

User · Answer

There are answers over the net that try to solve this  however none of them functioned correctly for me  Goal  put a background image on the body and have background-size  cover  work mobile  without media queries  overflows  or hacky z-index  -1  position  absolute  overlays   Here is what I did to solve this  It works on Chrome on Android even when keyboard drawer is active  If someone wants to test iPhone that would be cool   body       background   FFFFFF url     image something jpg   no-repeat fixed top center      background-size  cover      -webkit-background-size  cover     safari may need this        Here is the magic  Treat html like a wrapper with a ratio enforced height relative to the actual viewport  You know the classic responsive tag  lt meta name  viewport  content  width device-width  initial-scale 1  gt   This is why the vh is used  Also  on the surface it would seem like body should get these rules  and it may look ok   until a change of height like when the keyboard opens up   html       height  100vh     set viewport constraint        min-height  100      enforce height

User · Answer

For Safari versions  lt 5 1 the css3 property background-size doesn t work  In such cases you need webkit   So you need to use -webkit-background-size attribute to specify the background-size   Hence use -webkit-background-size cover   Reference-Safari versions using webkit

User · Answer

I found a working solution  the following CSS code example is targeting the iPad    media only screen and  min-device-width   768px  and  max-device-width   1024px         html             height  100           overflow  hidden          background  url  http   url com image jpg   no-repeat top center fixed          background-size  cover              body             height 100           overflow  scroll          -webkit-overflow-scrolling  touch             Reference link  https   www jotform com answers 565598-Page-background-image-scales-massively-when-form-viewed-on-iPad

User · Answer

I have had a similar issue recently and realised that it s not due to background-size cover but background-attachment fixed   I solved the issue by using a media query for iPhone and setting background-attachment property to scroll   For my case    cover       background-size  cover      background-attachment  fixed      background-position  center center        media  max-width   iphone-screen            background-attachment  scroll            Edit  The code block is in LESS and assumes a pre-defined variable for  iphone-screen  Thanks for the notice  stephband

User · Answer

media  max-width   iphone-screen      background-attachment inherit        background-size cover    -webkit-background-size cover

User · Answer

Also posted here   quot background-size  cover quot  does not cover mobile screen  This works on Android 4 1 2 and iOS 6 1 3  iPhone 4  and switches for desktop  Written for responsive sites    Just in case  in your HTML head  something like this    lt meta name  viewport  content  width device-width  initial-scale 1 0   gt    HTML    lt div class  html-mobile-background  gt  lt  div gt    CSS   html          Whatever you want       html-mobile-background       position  fixed      z-index  -1      top  0      left  0      width  100       height  125      To compensate for mobile browser address bar space        background  url  images bg jpg  no-repeat       background-size  100  100       media  min-width  600px        html           background  url  images bg jpg  no-repeat center center fixed           background-size  cover             html-mobile-background           display  none

User · Answer

I ve had this issue on a lot of mobile views I ve recently built    My solution is still a pure CSS Fallback  http   css-tricks com perfect-full-page-background-image  as three great methods  the latter two are fall backs for when CSS3 s cover doesn t work    HTML   lt img src  images bg jpg  id  bg  alt    gt    CSS   bg     position  fixed     top  0     left  0         Preserve aspect ratio      min-width  100     min-height  100

[html] CSS background-size: cover replacement for Mobile Safari

Examples related to html

Examples related to css

Examples related to mobile-safari