background attachment fixed not working safari

background-attachment:fixed still not supported?

Every now and then I need to make a website. And I noted in my last project that

Please apple, fix this problem. Come on... It is ridiculous

Apple is just plain stupid regarding web development, it's a ******* stone in front of the progress lol. I will never buy any of their products again.

Nobody? Not even someone from Apple? Do Apple people participate in this forum at all?

I'm not shure but i read in ohter sites, the reazon why isn't work is because apparently it costs a lot to mobile browsers, so it's been disabled.

I found this link https://css-tricks.com/forums/topic/background-attachmentfixed-not-working-on-mobile/

Why do iphones cost the earth if they can't even support CSS from 10 years ago?

Come on. Seriously.

so iPhone 12 can render AR but not an image in the background :D

Come on APPLE! We're building stuff here with animations that require this. Just enable it already so we can use it and build awesome stuff.

Just need to simply attach a non-scrolling background and have knockout svg scroll over the top of it. Shocked that it's not working because Apple is not supporting it. This feels like the old days with IE.

I have just came across this issue while I was creating a landing page for my project. Kept scratching my head on why my iPhone couldn't render fixed background attachment while my Android phone could.

Turns out Apple does not support this feature...

Why? Just why???

Another voice from Poland. We also need this primary css style: fixed background image . I thought that IE6 was poor in css. Today the winner is iPhone's browser. So disappointed...

This is ABSURD! So, now I have to go an edit my mobile settings for a background that will display properly on Apple devices, and lose a significant level of my design impact, even tho it displays fine on other devices... shameful! For the amount of $$$ we pay for these phones and the extent of the development behind all their boasted performance, this is pathetic. Total amateur hour! APPLE - please get with the program on this!!!!

Hey, I'm having this issue as well. The most perplexing part to me, is that it works on one of my apps, and not another.

fixed bg attachment works on mobile (iphone 13pro) here: https://blog-next-js-sigma.vercel.app/

yet it does not work for another app i'm working on. I'm a fairly new developer and I built that by following this tutorial: https://www.youtube.com/watch?v=HYv55DhgTuA&ab_channel=JavaScriptMastery

i definitely slowed it down by adding a backdrop blur to all my translucent components... but bg attachment fixed works. there is a link to the tutorial github on their youtube page

Apple decided fixed background is not the vibe. That's all. Apple is god remember it

YMMD 😂

😂😂😂😂 most def, i even tired doing a bit of research on why its “expensive” to support fixed background and i just keep hitting a brick wall

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

background-attachment

The background-attachment CSS property sets whether a background image's position is fixed within the viewport , or scrolls with its containing block.

The background-attachment property is specified as one of the keyword values from the list below.

The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the element. (This is not compatible with background-clip: text .)

The background is fixed relative to the element's contents. If the element has a scrolling mechanism, the background scrolls with the element's contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.

The background is fixed relative to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)

Formal definition

Formal syntax, simple example, multiple background images.

This property supports multiple background images. You can specify a different <attachment> for each background, separated by commas. Each image is matched with the corresponding <attachment> type, from first specified to last.

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Using multiple backgrounds

NO BUG: Background "fixed" broken on iOS?

Bricks Version : 1.4 Browser : Safari, Chrome, possibly Brave & Firefox OS : iOS URL : https://tottelundgren.com

I ran into this odd problem where my images “don’t load” when testing my site on my iPhone. The “Fixed” setting for background images of a container seems to break them when using Safari & Chrome. The scroll effect is not happening, and the images does not load properly. It just looks zoomed in to a point where it’s just a gradient of colors.

If I then set the background to “scroll” it works perfectly fine.

On my page provided above, I’ve set the first images (Photography text) to fixed and the second one (Web text) set to scroll.

This does only occur on my phone. It looks perfectly fine in preview when editing on my computer. Also works perfectly fine on my girlfriend Android.

This is an issue with background-attachment: fixed rule itself as far as I know.

I generally set it to scroll on smaller breakpoints.

Best regards, timmse

But is there a workaround? Would really appreciate if someone could tell me how they handle this.

A workaround is to add a fixed element instead, with a regular background. As the issue is only with fixed backgrounds, but it handles fixed elements fine.

eg The Fixed Background Attachment Hack | CSS-Tricks - CSS-Tricks

I searched on every forum on internet and eventually end up fixing this by changing wallpaper automatically on your iPhone. Here are some potential causes and solutions:- 1. Focus Mode with assigned wallpaper:-

Focus Modes allow you to customize your iPhone’s notifications and appearance for different situations like “Sleep” or “Work.”

These modes can also have a designated wallpaper. If a Focus Mode with a specific wallpaper is activated, it might change the wallpaper unexpectedly.

Go to Settings > Focus.

Check each Focus Mode (Sleep, Work, etc.) and ensure no wallpaper is assigned. If there is, tap on the mode, select “Customize Screens,” and tap the “-” sign next to any unwanted wallpaper. 2. Dynamic wallpapers:-

Live wallpapers and Dynamic wallpapers on iPhones can automatically change throughout the day or based on specific conditions. Solution:-

Go to Settings > Wallpaper.

If you see a Live wallpaper or Dynamic wallpaper selected, choose a different, static wallpaper. 3. Accessibility feature:-

The “Reduce Motion” accessibility feature can minimize animation and movement on your iPhone, potentially affecting wallpaper transitions. In rare cases, this might cause the wallpaper to appear changed. Solution:-

Go to Settings > Accessibility > Motion.

If “Reduce Motion” is enabled, try disabling it temporarily to see if the wallpaper changes stop. 4. Software bug:-

Occasionally, software bugs can cause unexpected behavior. Solution:-

Ensure you have the latest iOS version: Go to Settings > General > Software Update. Install any available updates.

Restart your iPhone: A simple restart can sometimes resolve temporary glitches. More details instruction below. https://www.youtube.com/watch?v=eFNddXjP8jA&ab_channel=TheGeekPage

I use a piece of CSS to detect iOS and unset fixed property.

Then just add the unfix-ios-bg class to any element with a scrolling bg.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cover Block: Fixed background problem in iPadOS 13.x Safari #17718

depthoffocus commented Oct 2, 2019 • edited

• 👍 3 reactions

depthoffocus commented Oct 2, 2019

• 👍 5 reactions
• 😕 1 reaction

Sorry, something went wrong.

zdenys commented Apr 24, 2020

Depthoffocus commented apr 24, 2020.

• 👍 1 reaction

jeroenrotty commented Sep 7, 2020

charlesjayway commented Sep 30, 2020

Jeroenrotty commented sep 30, 2020.

jasmussen commented Jun 30, 2021

Robertght commented Oct 28, 2021

Jasmussen commented nov 1, 2021.

paaljoachim commented Dec 14, 2021 • edited

tomasztunik commented Apr 6, 2022 • edited

Paaljoachim commented apr 7, 2022 • edited.

Successfully merging a pull request may close this issue.

CSS background-attachment

Method of defining how a background image is attached to a scrollable element. Values include scroll (default), fixed and local .

• 4 - 123 : Supported
• 124 : Supported
• 125 - 127 : Supported
• 12 - 123 : Supported
• 3.1 - 4 : Partial support
• 5 - 12.1 : Supported
• 13 - 13.1 : Partial support
• 14 - 15.3 : Not supported
• 15.4 - 17.3 : Supported
• 17.4 : Supported
• 17.5 - TP : Supported
• 2 - 24 : Partial support
• 25 - 124 : Supported
• 125 : Supported
• 126 - 128 : Supported
• 9 - 10.1 : Partial support
• 10.5 - 108 : Supported
• 109 : Supported
• 5.5 - 8 : Partial support
• 9 - 10 : Supported
• 11 : Supported

Chrome for Android

Safari on ios.

• 3.2 - 4.3 : Not supported
• 5 - 12.5 : Partial support
• 13 - 17.3 : Not supported
• 17.4 : Not supported
• 17.5 : Not supported

Samsung Internet

• 4 : Not supported
• 5 - 23 : Partial support
• 24 : Partial support
• all : Not supported

Opera Mobile

• 10 : Partial support
• 11 - 12.1 : Supported
• 80 : Supported

UC Browser for Android

• 15.5 : Supported

Android Browser

• 2.1 - 4 : Not supported
• 4.1 - 4.3 : Partial support
• 4.4 - 4.4.4 : Not supported
• 124 : Not supported

Firefox for Android

• 14.9 : Supported

Baidu Browser

• 13.52 : Supported

KaiOS Browser

• 2.5 : Supported
• 3 : Supported

Most mobile devices have a delay in updating the background position after scrolling a page with fixed backgrounds.

Background-attachment:fixed not working as expected

I’m trying to achieve this effect, when you scroll the image stays the the top and the content goes over the top.

http://narrative.ly/drinking-buddies/the-great-brooklyn-vodka-experiment/

I’m trying the effect on the #top_header div by adding background-attachment: fixed. It works when I put the div outside the #l_container div which has (and needs) position: relative and I need it inside that container really.

Is this normal behaviour? I didn’t realise that background-attachment: fixed was constrained by a relatively positioned container.

http://mikeebee.com/staging/carter/interactive/index.html

Many thanks Mike

Hm, having position: relative on #l_container (the parent element) seems to be getting in the way, as it works if you remove that. However, this messes with the menu.

You’ve got your elements in a strange order, though, which doesn’t help. Why are you using that source order?

This is a known webkit bug as it is working ok elsewhere. The problem is that transforms kill position:fixed on all children so you either have to remove the transforms (and probably transitions) or else move the fixed elements out of the same context.

I’ve seen this bug a few times now and its a real pain to workaround.

Weirdly, it works OK for me in Chrome if you change the right setting here from 0 to -320px:

and change the right setting here:

However that gives you a horizontal scrollbar so perhaps setting right to :200% will push it off the left side of the screen instead and no scrollbar.

However both versions stop working again once the menu is selected and slides into position.

Perhaps something like this would be better.

(The code above is over-rides and should follow the original)

It uses ralphs trick of moving the element off screen but doesn’t incur a scrollbar.

Hmm that is producing some unusual behaviour in Chrome. I have updated the example .

When you open the menu, the image is no longer fixed. If you scroll down so some of the picture container is off screen and then open the menu and scroll back to the top the top part of the picture that was off screen has disappeared!

Huh, I don’t get that at all in Chrome. Have you refreshed your browser?

As Ralph said I don’t see that effect.

When you click the menu the background does become un-fixed but I mentioned that above as once the menu is on the page it then affects the fixed positioning. However, it shouldn’t really be a problem. You either have to lose the fixed positioing or the transforms or re-work the html (if possible) so that the transitions aren’t in the same parent as the background (although transitions to seem to take over all the page in webkit).

I’ll have another look later and see if there is any other fixes (or Ralph might fond some other anomaly that will work :))

Sorry for the late reply chaps! I’ve tried it on a different machine (although same browser and OS - Chrome 29 and OS X 10.8) and I still get that weird effect.

I’ve fashioned a workaround where I’ve positioned a similar sized container behind the header and positioned it behind. It’s working ok at the moment but it feels a bit hacky.

Check it out here

Got an issue now on iOS where if you scroll to the very bottom of the page, some elements ( #top_bar and #page_header ) disappear when you scroll back to the top… until scrolling stops. Looks like it’s something to do with the transition again! - I tried to do a screencast but it wouldn’t work.

That looks better in Chrome Mike and I think you will have to live with the hacks until Chrome fixes that bug.

Regarding IOS then I looked on the ipad and it seemed ok and the only think I noticed was the background to the small menu icon was missing but the rest of content seemed to be there. This will be very hard to debug from our end as the only way to debug mobile/tablet is to make a working copy and test it.

Howdy chaps,

Just revisiting this as I no longer need position: relative; on the container. So, am I right in thinking if I set background-attachement: fixed; on an element, it’s background image will stay fixed to the window but also be 100% of the viewport too?

Basically, I want the image to remain fixed to the top of the window but only occupy the space of it’s container. Is this possible?

Ah, rats! So there is no way to fix it but just occupy a certain height?.. Other than using an absolutely positioned container with the image.

Maybe I misunderstood the question, mikeebee8. Let me rephrase my answer anyway.

If you have a container somewhere on a page and you give it a {background-image} with {background-attachment: fixed}, the image should be positioned within that container as if the image started at the top left corner of the window. Your understanding of {background-attachment: fixed} sounds correct to me. I’m not sure about the “100% of the viewport” part of your question, but would be correct to say that the image in the container should appear to be fixed to top left corner of the window no matter where that container is positioned on the page or what size it is.

Apparently Webkit has/had a problem with {background-position:fixed} and, at one time, FF had a problem if {background-position:fixed} was applied to a <td> (not sure it it’s been fixed).

If you want to post a link to your page without the {position:relative} ancestor, I can look at it with Opera and see how it behaves.

Works in Opera, Chrome and FF.

No worries, I’m still a little confused though. Your example shows that the image does indeed take up the full height of the browser window but I only want the image to occupy the height of my hero container. Otherwise it’s far too stretched.

Apologies if I’m not explaining it correctly… or I’m missing something!

You’re fine, Mike. I didn’t read the entire thread thoroughly enough. My response is off base. Sorry.

If you apply background-attachment fixed to an element the image is placed in relation to the viewport and not the element you applied it to.

However, the image will only be visible if your container is over the area where the image resides.

Best seen in a live example :

Rons example shows the same behaviour if you remove the image from the body.

You would need to place a fixed positioned element at the top of the page at the size you want with a normal background image set to cover. In that way the image can span the element and still remain fixed because the element is fixed.

Want to highlight a helpful answer? Upvote!

Did someone help you, or did an answer or User Tip resolve your issue? Upvote by selecting the upvote arrow. Your feedback helps others!  Learn more about when to upvote >

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

CSS: Background not showing up iPhone or iPad but works on iMac ( Safari )

I've got a full width hero background that is working properly on every browser we tested except for Safari on iPhone and iPad. It does work on iMac Safari . On iPhone and iPad it doesn't appear. Here's the code:

padding: 0;

height: 600px;

background-image: url('../images/heroFullScreen.jpg');

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

You can view the site here: sanitonplastic.ca to recreate the problem if you've got one of the devices.

Really hope someone can help, we're supposed to be going live tomorrow.

iPad Pro 10.5-inch, Wi-Fi, Cellular

Posted on Jan 15, 2021 4:59 AM

Similar questions

• Safari not rendering images in Canvas Learning Management System When I use Canvas, very often embedded images do not render. They look like this: When they should look like this: In Chrome, there's no problem. The images render just fine. The problem is that many of my students use Safari (and are using the latest version of Safari). The folks at Canvas said to disable the "Prevent cross-site tracking" preference (Privacy). And then clear the Safari Cache. This works...but you have to clear the cache constantly...and that's a pain. The weird part—I'm having this issue using an Apple-created Canvas Commons course. But I've seen it happen in other Canvas courses that I've been part of. Anyone know how to get Safari (13.1.2) to play nice with Canvas? 3242 2
• google meet video background not working :( I using a safari version 14.1.2 and when I want to change background it keep saying that this browser does not support. What can I do :( 2445 1
• How to improve looks of Safari? Safari is so blahh looking. Is there any was to change the background and make it more interesting. Chrome has so many background pics to chose from to make it more eye appealing. Roy 124 1

Loading page content

Page content loaded

Jan 17, 2021 6:30 AM in response to AnthonyDrake098

You may need to invoke the CSS3 @media wrapper for the CSS that you have shown, in order for it to view properly on iPhone and iPads, or via an HTML link reference.

• Use the old theme

Home / Plugin: GenerateBlocks / Fixed (Container) Background Image doesn’t work mobile

Fixed (Container) Background Image doesn’t work mobile

(@stempelschneider)

2 years, 5 months ago

I am using the container block with fixed images as background. As one can see in my link its working on desktop and gives me the parallax effect. But its not working on mobile displays and devices. The background-attachment: fixed style is overwritten by the ::before notation of the pseudo-element css. Set to “initial”.

Can someone reproduce this behavior? Its a fresh WordPress install and there are no other plugins/themes installed or active. Theme is Generatepress and the free version of Generateblocks.

Is this a bug or made by design?

Any help is appreciated and by the way, thanks for this great plugin.

The page I need help with: [ log in to see the link]

(@yingscarlett)

Mobile devices don’t like fixed background, it makes the image pixilated on mobile. That’s why in mobile mode we add CSS to make sure it’s NOT fixed.

Hope it makes sense 🙂

Does it make sense to me?

Hm, not really. The common gutenberg cover block works fine on mobile (though I don’t like the zoom effect, thats coming with this block), so could container block too. I would like to choose and decide on my own. So, is this possible in the pro version of gutenbergblocks?

thanks for clearing that

(@diggeddy)

the majority of mobile devices disable the background-image: fixed; property. The reason for this – its a very CPU/GPU expensive process that consumes a lot of energy and can cause issues on low powered devices. In addition to this, there is a bug on iOS devices that massively scales up the image ( which is probably the undesired Zoom effect you see with the Cover Block ).

This is why it is best disabled on mobile devices and why we set the property to initial .

The Pro version does provide the Advanced Background options where you can set a specific image and background properties for different device sizes, BUT it will not overcome the inherent issues i covered above.

• The topic ‘Fixed (Container) Background Image doesn’t work mobile’ is closed to new replies.

• GenerateBlocks
• Frequently Asked Questions
• Support Threads
• Active Topics
• Unresolved Topics
• "background-image"
• In: Plugins
• 3 participants
• Last reply from: David
• Last activity: 2 years, 5 months ago
• Status: not resolved

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

Join our Live Session: Maximize Your Treehouse Experience! 🐸 Register here!

Join our free community Discord server here !

🤖 Level up your chatbot knowledge with our latest AI course.

🐸 What's happening at Treehouse? 💚

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here .

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

• Watch Video

CSS CSS Foundations Backgrounds and Borders Background Properties

Background-attachment: fixed doesn't work.

I'm in CSS Foundations - Background Properties and @11:00 Guil is discussing different background-attachment states and setting the value to "fixed" is not fixing the image in the browser, it's still scrolling along with the divs in their initial state. There's a separate page-styles.css file also called up by the html, I found that if I commented out in there the overflow property of the divs, fixed worked. But that's not really an option, and no other overflow value worked.

Here's the base code:

And here's my code (don't mind the Sass, or maybe do if that's the issue, but it's all up to spec in the actual css file)

If anyone has an idea, please let me know.

EDIT: The background image being "fixed" does shift inside its container when the style is applied, so it looks different than the other divs; also, if I resize my viewport it does stay in place while the other divs' bg images move with the viewport; however, on scrolling it does nothing. The background moves in sync with the text and other elements on the page as if it had been set to background-attachment: scroll. So does the one set to local. Sorry for the info dump. Would love a little wisdom on this.

Background-attachment: local; isn't working either. No matter what I set the value to, the background image scrolls with the page. I'm hoping there's something weird in my code somewhere, this is kind of frustrating. I should note that I'm in chrome.

You have to fix it to the body or maybe html. Otherwise it is fixed in relation to its container. Your code fixes it to the .fixed class, but not to the site as a whole (unless it is applied to the body).

German Tsatsura

its a chrome 67 issue. everything was working fine till I updated chrome. So far there are no issues with safari or firefox.

Currently I have found 2 fixes.

Change the position of your element with the fixed background image.

Posting to the forum is only allowed for members with active accounts. Please sign in or sign up to post.

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Background-Attachment:fixed; not working on mobile?

• This topic is empty.
• Author Posts

So, I have this site.

I have it working as it should on desktop. Even when I shrink my screen horizontally it works great.

But when I check my mobile, the background still scrolls?

http://niteowlcreative.com/ellis/

Are there any resolutions for this? I don’t mind if its Javascript, PHP, Python, C++, or even some sort of alien language no one has heard of yet… as long as it works!

Lots of answers on StackOverflow. Plus reasons why it was disabled in mobile browsers. This should get you started http://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios

• The forum ‘CSS’ is closed to new topics and replies.

Fixed background issue on Firefox and Safari for mobile

Tagged:  Firefox , fixed background , mobile , safari

• Author Posts

Hi, fixed background for sections’s bg image does not work on some mobile browsers. In some cases BG is not fixed, in other cases sections have no bg.

I’ve been able to reproduce the issue on: Firefox 68.5.0 for Android, Firefox 21.0 for iOS and at least some versions of Safari for iOS.

You can test here:

Any help? Thankyou

Hey aledef,

Thank you for the inquiry.

The parallax effect is actually disabled on mobile devices. You can find the script in the js > shortcodes.js and in the AviaParallaxElement function, you’ll find this code around line 261:

Best regards, Ismael

Hi Ismael, thankyou for the answer.

The issue actually affects sections with fixed background, not parallax. I edited this post to correct it.

Here is the correct eplanation of the issue:

Fixed background for sections’s bg image does not work on some mobile browsers. In some cases BG is not fixed, in other cases sections have no bg. I’ve been able to reproduce the issue on: Firefox 68.5.0 for Android, Firefox 21.0 for iOS and at least some versions of Safari for iOS. It works fine on Chrome mobile browsers.

You can test on you own demo, here:

Have a nice day Alessio

Thank you for the info.

Fixed backgrounds are not fully supported on iOS same as the parallax effect. Please check this page for more info about the background-attachment property.

// https://caniuse.com/#feat=background-attachment > Known Issues

iOS has an issue preventing background-attachment: fixed from being used with background-size: cover – see details

As I wrote the issue affects also Firefox for Android.

What is the version of Firefox in the Android device? It should be v68 or later in order for the fixed background to work. To fix the issue temporarily, we can set the background-attachment property to scroll on mobile view.

Please take your time to read this ( it’s the third time I write it ): I’ve been able to reproduce the issue on Firefox 68.5.0 for Android

Sorry for missing or for forgetting that info. Have you tried the css code above? Looks like the only workaround is to set background-attachment property from fixed to scroll on mobile view.

• You must be logged in to reply to this topic.