203 posts
  • Has sold $40,000+ on Envato Market
  • Made it to the Authors' Hall of Fame
  • Contributed a free file of the month
  • Has been part of the Envato Community for over 2 years
+2 more
ikaruna says

Hello,

I have stumbled upon a bit of a problem, the background position fixed/cover is killing me (is not working properly on iOS devices), anyone knows a solution for this (without JS)?

Thank you!

1870 posts
  • Helped improve Envato sites by detecting a security issue
  • Participated in a focus group or interview to improve the user experience on Envato Market
  • Contributed a free file of the month
  • Has sold $5,000+ on Envato Market
+14 more
SamBerson says

Hey there. What item are you requesting help about? Please contact the author directly so they can assist you.

203 posts
  • Has sold $40,000+ on Envato Market
  • Made it to the Authors' Hall of Fame
  • Contributed a free file of the month
  • Has been part of the Envato Community for over 2 years
+2 more
ikaruna says

Hey there. What item are you requesting help about? Please contact the author directly so they can assist you.

:) , I’m not a buyer, I’m an author, I’m talking about my item, which I can not post here.

1870 posts
  • Helped improve Envato sites by detecting a security issue
  • Participated in a focus group or interview to improve the user experience on Envato Market
  • Contributed a free file of the month
  • Has sold $5,000+ on Envato Market
+14 more
SamBerson says

Please email me with further details of your question, including a link to the item.

152 posts
  • Has referred 50+ members
  • Has sold $125,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 100+ items on Envato Market
+6 more
nagaemas says

It seems your issue is a known, but not widely described issue about background-size cover and background-attachment: fixed on iOS. I’ve also experienced this the first time I created a one page theme, it happens on all mobile Safari/Chrome.

The viewport’s height unlike on desktop browsers is interpreted not as the visible part of your screen but the whole page itself. This makes your background-image stretch, having the same height as the height of your whole page, thus if you have a very long page, the image’s height will be the same as the height of your page.

It’s better to just set the background-attachment to scroll on iOS devices. This needs to be done via JS for detecting iOS, but a non-JS solution would be using media query to just set the background-attachment to scroll below a specific screen width.

Hope that helps.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by