Jump to content

CSS - Change BG-attachment from fixed to scroll

kuba2

By kuba2,
in Dev Talk

 Share

Recommended Posts

kuba2 Sr. Member

kuba2

Posted
Posted

Hello

Is there a way to program my code in a way, that the website has Background-Attachment Fixed on laptops and PC's and Background-Attachment Scroll on mobile devices?

On ios Background-Attachment Fixed does not work. It can't be done with media queries, because the ipad pro is bigger than my laptop.

Maybe a Javascript or something.

 

I found this, but not knowing Javascript I don't know if it would work. Could this work? 

if (iosVersion >= 7) {
    $(document).scroll(function() {
        $('#background').css('background-position', '0px ' + $(document).scrollTop() + 'px');
    });
}

Can anybody offer some advice?

 

Thanks a lot

 

Jakob

Link to comment
Share on other sites
godmok Jr. Member

godmok

Posted
Posted

Just to clarify: background-attachment is not working well on iOS Safary: http://caniuse.com/#feat=background-attachment

Here the CSS that can work for the container (did not tried it out, but should work): 

.background {
    background-size: 100%;
    background-image: url('your_background.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}

Additional you can add "bottom: 0;" and "right: 0;" if something is not working.

At the end it would look like this in your HTML structure: 

<body>
  <div class="background"></div>
  ...
</body>

I don't really get why it is not possible with media queries, because you can get the device really easy by some width and height (and other parameter) values that are mostly used for iPad or other devices. Here a link for possibilities: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Here is a script from codePen to check the Version of the iOS version (I don't know if you already have this for your iosVersion):

and use it in your JS code for variable iosVersion. Then do some JS+CSS ~magic~.

Try CSS only (keep it simple), if it is not working (or get too complex for you) combine it with JS if it makes sense.

BUT: Please, do not run the scroll position on every scroll to change the position in your inline CSS code. On not so powerful hardware it can hurt the experience of your site. The CSS code should do better.

Hope this helps.

  • Like 3
Link to comment
Share on other sites
kuba2 Sr. Member

kuba2

Posted
  • Author
Posted

Thanks a lot for Your input! Very much appreciated.

In my understanding media queries only react to screen size. The ipad Pro has more or less the same size as a laptop. 

So a media querie is not the right way, otherwise the bg-attachment scroll will be applied to the laptop, where bg-attachment fixed works fine.

I would need to use Your JS example, right?

 

Thanks again

Jakob

Link to comment
Share on other sites
godmok Jr. Member

godmok

Posted
Posted

just made a little fiddle for you: https://jsfiddle.net/px0pa6uf/3/, hope the code will help you out. I don't know what image you use, so i put the optional @media code for the iPad pro. There you can set a background that is exactly matched for the device width and height.

You don't need the JS example for this, I just added it because I don't know how you get the iosVersion value, and maybe it comes helpful for you, but no, it is not needed for this CSS fix.

Fixing CSS problems on devices feels like IE fixes all over again...

  • Like 3
Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...