background fixed no repeat not working on mobile

Question

I am building a webpage where I want the background image to scale to fit the whole screen  maintain aspect ratio and be fixed  so if you scroll down  the background image stays in the same place    I have achieved this in desktop browsers with the CSS below  but it doesn t work on an iPhone or iPad  On those devices the background is too big  it continues below the fold  and if you scroll down far enough  the image will start repeating   Anyone have a fix  THanks   HTML     background  url photos 2452 jpg  no-repeat center center fixed    -webkit-background-size  cover    -moz-background-size  cover    -o-background-size  cover    background-size  cover

User · Answer

I m late to the party  but this is  unbelievably  still a problem as of the 11 05 2017  Here is a simple solution which will also work cross-platform with linear gradients    x000D   x000D   backgroundFixed   x000D    background  linear-gradient 160deg   2db4a8 0    13af3d 100    x000D    background-size  100vw 100vh  x000D    position  fixed  x000D    top  0  x000D    left  0  x000D    height  100vh  x000D    width  100vw  x000D    z-index  -1000  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D     lt head gt  x000D       lt meta charset  UTF-8  gt  x000D       lt title gt title lt  title gt  x000D     lt  head gt  x000D     lt body gt  x000D       lt div class  backgroundFixed  gt  lt  div gt  x000D       lt div class  paragraphContainer  gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D         lt p gt We re here to make the body scroll lt  p gt  x000D       lt  div gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Found a perfect solution for the problem  100  working on mobile as well as desktop  https   codepen io mrinaljain pen YObgEP   x000D   x000D   jpx-is-wrapper   x000D      display  block  x000D      margin  0 auto  x000D      overflow  hidden  x000D      position  relative  x000D      z-index  314749261  x000D      width  100vw  x000D      height  300px x000D    x000D   x000D   jpx-is-wrapper gt  jpx-is-container   x000D      background-color  transparent  x000D      border  0  x000D      box-sizing  content-box  x000D      clip  rect auto auto auto auto   x000D      color  black  x000D      left  0  x000D      margin  0 auto  x000D      overflow  visible  x000D      position  absolute  x000D      text-align  left  x000D      top  0  x000D      visibility  visible  x000D      width  100   x000D      z-index  auto  x000D      height  300px x000D    x000D   x000D   jpx-is-wrapper gt  jpx-is-container gt  jpx-is-content   x000D      left  0  x000D      overflow  hidden  x000D      right  0  x000D      top  0  x000D      visibility  visible  x000D      width  100   x000D      position  relative  x000D      height  300px  x000D      display  block x000D    x000D   x000D   jpx-is-wrapper gt  jpx-is-container gt  jpx-is-content gt  jpx-is-ad   x000D      -webkit-box-shadow  rgba 0 0 0 0 65  0 0 4px 2px  x000D      -moz-box-shadow  rgba 0 0 0 0 65  0 0 4px 2px  x000D      box-shadow  rgba 0 0 0 0 65  0 0 4px 2px  x000D      bottom  26px  x000D      left  0  x000D      margin  0 auto  x000D      right  0  x000D      text-align  center  x000D      height  588px  x000D      top  49px  x000D      bottom  auto  x000D      -webkit-transform  translateZ 0   x000D      -moz-transform  translateZ 0   x000D      -ms-transform  translateZ 0   x000D      -o-transform  translateZ 0   x000D      transform  translateZ 0  x000D    x000D   x000D   jpx-position-fixed   x000D      position  fixed x000D    x000D   x000D   jpx-is-wrapper gt  jpx-is-container gt  jpx-is-content gt  jpx-is-ad gt  jpx-is-ad-frame   x000D      width  100   x000D      height  100  x000D    x000D   x000D   black-fader   x000D      position  absolute  x000D      z-index  1  x000D      width  100   x000D      height  100   x000D      opacity  0 75 x000D    x000D   x000D   video-containers   x000D      position  absolute  x000D      top  0  x000D      bottom  0  x000D      width  100   x000D      height  100   x000D      overflow  hidden  x000D      z-index  0 x000D    x000D   x000D   video-containers video  video-containers img   x000D      min-width  100   x000D      min-height  100   x000D      width  auto  x000D      height  auto  x000D      position  absolute  x000D      top  50   x000D      left  50   x000D      transform  translate -50   -50   x000D    x000D   lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  x000D   x000D   lt div class  jpx-is-wrapper  gt  x000D                          lt div class  jpx-is-container  gt  x000D                             lt div class  jpx-is-content  gt  x000D                                lt div class  jpx-is-ad jpx-position-fixed  gt  x000D                                      lt div scrolling  no  width  100   height  100   class  jcl-wrapper  style  border  0px  display  block  width  100   height  100    gt  x000D                                          lt div class  video-containers  id  video-container  gt  x000D                                             lt img src  https   via placeholder com 350x150  alt    class    gt  x000D                                          lt  div gt  x000D                                     lt  div gt  x000D                                lt  div gt  x000D                             lt  div gt  x000D                          lt  div gt  x000D                       lt  div gt  x000D   x000D   lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  lt p gt Salman s arrest has created a wave of tension in Bollywood because of all his projects that were lined up  especially his most awaited film  lt  p gt  x000D   x000D   x000D

User · Answer

I think that mobile devices dont work with fixed positions  You should try with some js plugin like skrollr js  for example   With this kind of plugin you can select the position of your div  or whatever  in function of scrollbar position

User · Answer

Thanks to the efforts of Vincent and work by Joey Hayes  I have this codepen working on android mobile that supports multiple fixed backgrounds   HTML    lt html gt    lt body gt     lt nav gt Nav to nowhere lt  nav gt     lt article gt        lt section class  bg-img bg-img1  gt         lt div class  content  gt           lt h1 gt Fixed backgrounds on a mobile browser lt  h1 gt         lt  div gt       lt  section gt        lt section class  solid  gt         lt h3 gt Scrolling Foreground Here lt  h3 gt       lt  section gt        lt section gt         lt div class  content  gt           lt p gt Quid securi etiam tamquam eu fugiat nulla pariatur  Cum ceteris in veneratione tui montes  nascetur mus  Quisque placerat facilisis egestas cillum dolore  Ambitioni dedisse scripsisse iudicaretur  Quisque ut dolor gravida  placerat libero vel            euismod           lt  p gt         lt  div gt       lt  section gt        lt section class  solid  gt         lt h3 gt Scrolling Foreground Here lt  h3 gt       lt  section gt        lt section class  footer  gt         lt div class  content  gt           lt h3 gt The end is nigh  lt  h3 gt         lt  div gt       lt  section gt      lt  article gt     lt  body gt    CSS         box-sizing  border-box     body     font-family   source sans pro     font-weight  400    color   fdfdfd    body  gt  section  gt  footer     overflow  hidden     nav     position  fixed    top  0    left  0    height  70px    width  100     background-color  silver    z-index  999    text-align  center    font-size  2em    opacity  0 8     article     position  relative    font-size  1em     section     height  100vh    padding-top  5em      bg-img  before     position  fixed    content         display  block    width  100vw    min-height  100vh      top  0    bottom  0    left  0    right  0    background-position  center    background-size  cover    z-index  -10       bg-img1 before         background-image  url  https   res cloudinary com djhkdplck image upload v1491326836 3balls 1280 jpg       bg-img2  before         background-image  url  https   res cloudinary com djhkdplck image upload v1491326840 icebubble-1280 jpg       bg-img3  before         background-image  url  https   res cloudinary com djhkdplck image upload v1491326844 soap-bubbles 1280 jpg       h1  h2  h3     font-family  lato    font-weight  300    text-transform  uppercase    letter-spacing  1px      content     max-width  50rem    margin  0 auto     solid     min-height  100vh    width  100     margin  auto    border  1px solid white    background  rgba 255  255  255  0 6       footer     background  rgba 2  2  2  0 5       JS JQUERY  window onload   function           Alternate Background Page with scrolling content  Bg Pages are odd s    var  bgImg       bg-img      var  nav      nav      var winh   window innerHeight    var scrollPos   0    var page   1    var page1Bottom   winh    var page3Top   winh    var page3Bottom   winh   3    var page5Top   winh   3    var page5Bottom   winh   5       window  on  scroll   function          scrollPos   Number   window  scrollTop   toFixed 2        page   Math floor Number scrollPos   winh   1       if  scrollPos  gt   0  amp  amp  scrollPos  lt  page1Bottom               if     bgImg hasClass  bg-img1               removeBg   bgImg  2  3  1       element  low  high  current          bgImg addClass  bg-img1                  else if  scrollPos  gt   page3Top  amp  amp  scrollPos  lt   page3Bottom          if     bgImg hasClass  bg-img2               removeBg   bgImg  1  3  2       element  low  high  current          bgImg addClass  bg-img2                  else if  scrollPos  gt   page5Top  amp  amp  scrollPos  lt   page5Bottom          if     bgImg hasClass  bg-img3               removeBg   bgImg  1  2  3       element  low  high  current          bgImg addClass  bg-img3                       nav html  Page      page     window position      scrollPos                This function was created to fix a problem where the mouse moves off the    screen  this results in improper removal of background image class  Fix    by removing any background class not applicable to current page  function removeBg  el  low  high  current       if  low  gt  high    low  lt   0    high  lt   0        console log   bad low high parameters in removeBg          for  var i low  i lt  high  i          if   i    current        avoid removing class we are trying to add       if  el hasClass  bg-img   i              el removeClass  bg-img   i                            removeBg

User · Answer

I have found a great solution for fixed backgrounds on mobile devices requiring no JavaScript at all   body before     content        display  block    position  fixed    left  0    top  0    width  100     height  100     z-index  -10    background  url photos 2452 jpg  no-repeat center center    -webkit-background-size  cover    -moz-background-size  cover    -o-background-size  cover    background-size  cover      Please be aware of the negative z-index value of -10  html root element default z-index is 0  This value must be the smallest z-index to have it as background

User · Answer

I have been busy using different posts and methods for two days trying to figure it out  I urge anyone to START by looking at the post by Eggs  and mess around with the codepen he and others have built   This has been the only solution to work properly for me that I have found  I recommend his answer as a solution  a good starting point at minimum for those of us still figuring out this problem in our own web applications   I haven t gotten enough reputation yet to comment on his post  otherwise I would  I can t even vote on it yet or I would do that too   This is the actual code I used   html  before       content           display  block      background-image  url  path-to-your-image        background-position  bottom left         For my instance this is how I have built my bg image  Indexes off the  bottom left for consistency       background-size  cover      top  0      bottom  0      left  0      right  0      position  fixed      z-index  -10         I haven t tested my full app functionality after changing the z-index  but everything appears to work flawlessly right now        I tried everything with his original code  When I had   background-position  center     chrome  on latest android update as of 1 8 18  would lag with updating the image s position  so when scrolling through the website there would be a patch of color where my navbar URL bar of the browser was  Then it would disappear after the browser recalculated the image center is what I assume was happening    So  I recommend making an image around your footer or header like I did  and setting either top left right or bottom left right for your position   In summary  THIS WORKS for me  So try it out if you re reading down this far and nothing has worked yet  Though you should ve already hit the original post by now    Thank you Eggs  and the other fellows you collaborated with on your Codepen

User · Answer

I found maybe best solution for parallax effect which work on all devices   Main thing is to set all sections with z-index greater than parallax section    And parallax image element to set fixed with max width and height   x000D   x000D  body  html   margin  0px    x000D  section   x000D    position  relative     Important    x000D    z-index  1     Important    x000D    width  100   x000D    height  100px  x000D    x000D   x000D  section blue   background-color  blue    x000D  section red   background-color  red    x000D   x000D  section parallax   x000D    z-index  0     Important    x000D    x000D   x000D  section parallax  image   x000D    position  fixed     Important    x000D    top  0     Important    x000D    left  0     Important    x000D    width  100      Important    x000D    height  100      Important    x000D    background-image  url https   www w3schools com css img fjords jpg   x000D    background-repeat  no-repeat  x000D    background-position  center  x000D    -webkit-background-size  cover  x000D    -moz-background-size  cover  x000D    -o-background-size  cover  x000D    background-size  cover  x000D    x000D   lt section class  blue  gt  lt  section gt  x000D   lt section class  parallax  gt  x000D     lt div class  image  gt  lt  div gt  x000D   lt  section gt  x000D   lt section class  red  gt  lt  section gt  x000D   x000D   x000D

User · Answer

I ve been having the same problem  but now it works  All I had to do was add background-size  cover  important  and it works on my Android device    The entire code looks like this   body page-id-8  art-main     background   000000 url  link to image    important    background-repeat  no-repeat  important    background-position  50  50   important    background-attachment  fixed  important    background-color  transparent  important    background-size  cover  important      Thanks a lot  taylan derinbay and  Vincent

User · Answer

background-size  cover   causes a lot of issues on all mobile browsers except Firefox   This fixed my issue      Mobile first    body      background-image  url bg mobile jpg       background-attachment  fixed      background-repeat  no-repeat        Then tablets  laptops and desktops  768px and up      media screen and  min-width 768px    body      background-image  url bg jpg       background-size  cover

User · Answer

See my answer to this question  Detect support for background-attachment  fixed    Detecting touch capability alone doesn t work for laptops with touch screens  and the code for detecting touch giving by Christina will fail on some devices   Hector s answer will work  but the animation will be very choppy  so it ll look better to replace fixed with scrolling on devices that don t support fixed  Unfortunately  Taylon is incorrect that iOS 5  supports background-attachment fixed   It does not   I can t find any list of devices that don t support fixed backgrounds   It s likely that most mobile phone and tablets do not

User · Answer

This is what i do and it works everythere       container     background  url   myImage     background-attachment  fixed    background-size  cover   transform  scale 1 1  1 1        then       media only screen and  max-width  768px      background-size  100  100vh

User · Answer

You could use this  tag to make  fixed  positionned element well working on mobile       lt meta name  quot viewport quot  content  quot width device-width  initial-scale 1 0 quot  gt

User · Answer

background-attachment fixed in IOS Safari has been a known bug for as long as I can recall   Here s some other options for you   https   stackoverflow com a 23420490 1004312  Since the fixed position in general is not all that stable on touch  some more than others  Chrome works great   it is still acting up in Safari IOS 8 in situations that used to work in IOS 7  therefore I generally just use JS to detect touch devices  including Windows mobile                     SUPPORTS TOUCH OR NOT                  Detects touch support and adds appropriate classes to html and returns a JS object   Copyright  c  2013 Izilla Partners Pty Ltd    http   www izilla com au    Licensed under the MIT license     https   coderwall com p egbgdw     var supports    function         var d   document documentElement          c    ontouchstart  in window    navigator msMaxTouchPoints      if  c            d className      touch           return               touch  true                 else           d className      no-touch           return               touch  false                         CSS example assumes mobile first    myBackgroundPrecious      background  url 1 jpg  no-repeat center center     background-size  cover      no-touch  myBackgroundPrecious      background-attachment fixed

User · Answer

I had a very simple solution for this  after struggling with all the methods of fixing this   i had the problem on my mobile IOS devices      css  desktop     ci-hero-11  widget-wrap    ci-hero-12  widget-wrap   background-size  auto  background-attachment  fixed      widget-wrap   background-attachment  scroll      Then i overwrite it with media query removing  fixed  as background attachment      css  mobile     media  max-width  767px     ci-hero-11  widget-wrap    ci-hero-12  widget-wrap        background-attachment  initial         initial -   Sets this property to its default value  I think because IOS doesn t accept  fixed  it falls back to a default value it accepts  scroll   This worked for me on every device  Hope it helps someone else as well

User · Answer

Fixed positioning is supported on mobile since Android 2 2 and iOS 5   You need to use device-with viewport on meta and give the background image with somewhere with an id  Then you will get that id with jquery and give that a height  And of course 100  width   lt html gt   lt head gt       lt title gt  lt  title gt       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt       lt style gt           main             background  url 1 jpg  no-repeat center center fixed            -webkit-background-size  cover            -moz-background-size  cover            -o-background-size  cover            background-size  cover            width  100             overflow  hidden                 lt  style gt   lt  head gt   lt body id  main  gt    lt script src  https   code jquery com jquery-2 1 1 min js  gt  lt  script gt   lt script gt      var hgt     window  height            main   css  height   hgt   lt  script gt        http   jsfiddle net talendil oackpmv5

[html] background: fixed no repeat not working on mobile

Examples related to html

Examples related to ios

Examples related to css

Examples related to mobile

Examples related to safari