Published
Joshua Elijah Sandoval
Share: 

How-to: Fixed Backgrounds on iOS Devices

Surprisingly, there aren't a lot of snippets on this topic, and what there is are half-baked solutions that require markup changes. Let's change that. Here's the best way to have a fixed CSS background on iOS with just CSS.

html::before { content: ""; position: absolute; z-index: -1; position: fixed; right: 0px; bottom: 0px; left: 0px; display: block; width: 100%; height: 100%; background-size: cover; background-position: center center; background-image: url("./path/to/my/image.png"); }

Obviously not an ideal solution, we all wish we could use background-attachment: fixed; everywhere, but using pseudo elements have other benefits, such as CSS filters. We can effectively manipulate any background to our liking, whether we want it blurred, monotone, etcetera.

html::before { -webkit-filter: blur(8px); filter: blur(8px); }

Now, that's all great, but if you want a background layer on top of your image, the best way, and my recommended way to go would be via SVG background-image on top using the multi-background support that's been in CSS for awhile. While this can be done via the ::after pseudo element, you might want to use that for something else, nonetheless, I will show both examples, and leave it off there.

SVG Method: html::before { background-size: 1px 1px, cover; background-repeat: repeat, no-repeat; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23FFFFFF' fill-opacity='0.75' /%3E%3C/svg%3E"), url("./path/to/my/image.png"); } ::after Method: html::before, html::after { content: ""; position: absolute; z-index: -2; position: fixed; right: 0px; bottom: 0px; left: 0px; display: block; width: 100%; height: 100%; }
html::before { background-size: cover; background-position: center center; background-image: url("./path/to/my/image.png"); }
html::after { z-index: -1; background-color: rgba(255, 255, 255, 0.75); }