Fixed background image with ios7
Solution 1
Using background-attachment: fixed
with background-size: cover
causes issues on most mobile browsers (as you've seen). You can try using background-attachment: scroll
. This won't give your desired effect, but you'll see the images at least. You could use a media-query or two to limit it to devices that are tablets or phones by using @media screen and (max-device-width: 1024px){}
OR
You can use background-position: scroll
and include some javascript that will keep the image at the scrolled position (keeping it at the top of the window): DEMO
Solution 2
Know this is an old thread, but wanted to provide an updated solution that builds on the solution from @Cruz-Nunez
Relying on viewport size is liable to fail. For example, relying on a 767px viewport won't work on iPads, and increasing the size negates the benefit of this approach.
Instead, you can check if the device has hover capabilities, and if it doesn't, override like this:
@media (hover: none) {
.homeHero {
background-attachment: initial;
}
}
You can also check if the device has a coarse pointer (e.g. a finger) instead of a fine one (e.g. a mouse):
@media (pointer: coarse) { ... }
Solution 3
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)
/*-------- iPads (portrait and landscape) --------*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#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.
Solution 4
EDIT: Sep 2020 This broke for some iPads so I now use:
@supports (-webkit-touch-callout: inherit) {
.paral {
background-attachment: scroll;
}
}
Original Post: Combining the ideas of @brouxhaha and @yllama: Use a media query that targets iOS, which is found at this SO post, to set
background-attachment: scroll;
This way the fixed background image appears for non-iOS mobile and all other devices.
.widget-wrap {
background-attachment: fixed;
...
...
}
@supports (-webkit-overflow-scrolling: touch) {
.widget-wrap {
background-attachment: scroll;
}
}
Solution 5
Try this:
HTML
<div class="container">
<div class="fixed-img"></div>
<h1>Words that go over text</h1>
</div>
css
.fixed-img {
position: fixed;
z-index: -1;
}
JSFiddle example
Related videos on Youtube
user2560895
Updated on July 09, 2022Comments
-
user2560895 almost 2 years
I have a project that I am using the fixed background image. It works great on everything except ios7. On the ipad the background image is zoomed in and blurry. Here is the CSS code I am using -
.header { display: table; height: 100%; width: 100%; position: relative; color: #fff; background: url(../images/boston2.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
here is a link to the live page - www.wdeanmedical.com
What am I missing?
-
JosephK about 9 yearsBut if you have parallax happening, not using 'fixed' will break the parallax. A question marked as a 'duplicate' of this one has much more info and references to workarounds. See here: stackoverflow.com/questions/23236158/…
-
ObedMarsh over 8 yearsSay I had several horizontal sections on my page and I wanted to use this effect in the bottom div, how can I make this work? This code only works if the image is on the top of the page.
-
brouxhaha over 8 yearsYou probably need to either ask a new question or provide more detail because I have no idea what you're trying to do.
-
mems about 8 yearsYou can use a pseudo element instead:
.container::before{content: "";display: block;position: fixed;z-index: -1;height: 100%;width: 100%}
, and you don't need to add any element in DOM -
Frank Conijn - Support Ukraine about 6 yearsCould you make a live demo? (Not on CodePen or JSFiddle because they work with iframes, in which iOS will not fixate anything.)
-
Frank Conijn - Support Ukraine about 6 years@BjørnBørresen -- The JSFiddle indeed does not work, but that is because it works with iframes and iOS will not fixate anything in iframes, regardless of the code. The Live example Cruz is linking to does work on my iPad Pro 11.3. Or for a more bare-bones example, check out newskiinstruction.com/bgtest.html.
-
deathlock about 5 yearsThis is a great answer. I just learned of
hover: none
. Thanks! -
Fabian von Ellerts almost 5 yearsThis is probably the best way for now, too bad
@supports not (background-attachment: fixed)
doesn't work. -
jalmatari over 4 yearsbackground-size: 100% 100%;
-
Beanie over 3 yearsdoesnt work on safari mobile, well unless you want the image resizing and bouncing around the screen
-
shihao316558512 over 3 yearsthe base way for now
-
mike over 3 yearsSummary of this solution: Instead of using
background-attachment: fixed;
, add a background image to aposition: fixed;
div. -
wkille about 3 yearsThis answer should be accepted - would have saved me time.
-
frenchie about 3 yearsThis should be the accepted answer: it works like a charm. Great job!!