background: fixed no repeat not working on mobile
Solution 1
I have found a great solution for fixed backgrounds on mobile devices requiring no JavaScript at all.
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(photos/2452.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Please be aware of the negative z-index
value of -10
. html
root element default z-index
is 0
. This value must be the smallest z-index
to have it as background.
Solution 2
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)
@media (max-width: 767px) {
#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 3
Thanks to the efforts of Vincent and work by Joey Hayes, I have this codepen working on android mobile that supports multiple fixed backgrounds
HTML:
<html>
<body>
<nav>Nav to nowhere</nav>
<article>
<section class="bg-img bg-img1">
<div class="content">
<h1>Fixed backgrounds on a mobile browser</h1>
</div>
</section>
<section class="solid">
<h3>Scrolling Foreground Here</h3>
</section>
<section>
<div class="content">
<p>Quid securi etiam tamquam eu fugiat nulla pariatur. Cum ceteris in veneratione tui montes, nascetur mus. Quisque placerat facilisis egestas cillum dolore. Ambitioni dedisse scripsisse iudicaretur. Quisque ut dolor gravida, placerat libero vel,
euismod.
</p>
</div>
</section>
<section class="solid">
<h3>Scrolling Foreground Here</h3>
</section>
<section class="footer">
<div class="content">
<h3>The end is nigh.</h3>
</div>
</section>
</article>
</body>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: "source sans pro";
font-weight: 400;
color: #fdfdfd;
}
body > section >.footer {
overflow: hidden;
}
nav {
position: fixed;
top: 0;
left: 0;
height: 70px;
width: 100%;
background-color: silver;
z-index: 999;
text-align: center;
font-size: 2em;
opacity: 0.8;
}
article {
position: relative;
font-size: 1em;
}
section {
height: 100vh;
padding-top: 5em;
}
.bg-img::before {
position: fixed;
content: ' ';
display: block;
width: 100vw;
min-height: 100vh;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-position: center;
background-size: cover;
z-index: -10;
}
.bg-img1:before {
background-image: url('https://res.cloudinary.com/djhkdplck/image/upload/v1491326836/3balls_1280.jpg');
}
.bg-img2::before {
background-image: url('https://res.cloudinary.com/djhkdplck/image/upload/v1491326840/icebubble-1280.jpg');
}
.bg-img3::before {
background-image: url('https://res.cloudinary.com/djhkdplck/image/upload/v1491326844/soap-bubbles_1280.jpg');
}
h1, h2, h3 {
font-family: lato;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
}
.content {
max-width: 50rem;
margin: 0 auto;
}
.solid {
min-height: 100vh;
width: 100%;
margin: auto;
border: 1px solid white;
background: rgba(255, 255, 255, 0.6);
}
.footer {
background: rgba(2, 2, 2, 0.5);
}
JS/JQUERY
window.onload = function() {
// Alternate Background Page with scrolling content (Bg Pages are odd#s)
var $bgImg = $('.bg-img');
var $nav = $('nav');
var winh = window.innerHeight;
var scrollPos = 0;
var page = 1;
var page1Bottom = winh;
var page3Top = winh;
var page3Bottom = winh * 3;
var page5Top = winh * 3;
var page5Bottom = winh * 5;
$(window).on('scroll', function() {
scrollPos = Number($(window).scrollTop().toFixed(2));
page = Math.floor(Number(scrollPos / winh) +1);
if (scrollPos >= 0 && scrollPos < page1Bottom ) {
if (! $bgImg.hasClass('bg-img1')) {
removeBg( $bgImg, 2, 3, 1 ); // element, low, high, current
$bgImg.addClass('bg-img1');
}
} else if (scrollPos >= page3Top && scrollPos <= page3Bottom) {
if (! $bgImg.hasClass('bg-img2')) {
removeBg( $bgImg, 1, 3, 2 ); // element, low, high, current
$bgImg.addClass('bg-img2');
}
} else if (scrollPos >= page5Top && scrollPos <= page5Bottom) {
if (! $bgImg.hasClass('bg-img3')) {
removeBg( $bgImg, 1, 2, 3 ); // element, low, high, current
$bgImg.addClass('bg-img3');
}
}
$nav.html("Page# " + page + " window position: " + scrollPos);
});
}
// This function was created to fix a problem where the mouse moves off the
// screen, this results in improper removal of background image class. Fix
// by removing any background class not applicable to current page.
function removeBg( el, low, high, current ) {
if (low > high || low <= 0 || high <= 0) {
console.log ("bad low/high parameters in removeBg");
}
for (var i=low; i<=high; i++) {
if ( i != current ) { // avoid removing class we are trying to add
if (el.hasClass('bg-img' +i )) {
el.removeClass('bg-img' +i );
}
}
}
} // removeBg()
Solution 4
Found a perfect solution for the problem 100% working on mobile as well as desktop
https://codepen.io/mrinaljain/pen/YObgEP
.jpx-is-wrapper {
display: block;
margin: 0 auto;
overflow: hidden;
position: relative;
z-index: 314749261;
width: 100vw;
height: 300px
}
.jpx-is-wrapper>.jpx-is-container {
background-color: transparent;
border: 0;
box-sizing: content-box;
clip: rect(auto auto auto auto);
color: black;
left: 0;
margin: 0 auto;
overflow: visible;
position: absolute;
text-align: left;
top: 0;
visibility: visible;
width: 100%;
z-index: auto;
height: 300px
}
.jpx-is-wrapper>.jpx-is-container>.jpx-is-content {
left: 0;
overflow: hidden;
right: 0;
top: 0;
visibility: visible;
width: 100%;
position: relative;
height: 300px;
display: block
}
.jpx-is-wrapper>.jpx-is-container>.jpx-is-content>.jpx-is-ad {
-webkit-box-shadow: rgba(0,0,0,0.65) 0 0 4px 2px;
-moz-box-shadow: rgba(0,0,0,0.65) 0 0 4px 2px;
box-shadow: rgba(0,0,0,0.65) 0 0 4px 2px;
bottom: 26px;
left: 0;
margin: 0 auto;
right: 0;
text-align: center;
height: 588px;
top: 49px;
bottom: auto;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0)
}
.jpx-position-fixed {
position: fixed
}
.jpx-is-wrapper>.jpx-is-container>.jpx-is-content>.jpx-is-ad>.jpx-is-ad-frame {
width: 100%;
height: 100%
}
.black-fader {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0.75
}
.video-containers {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0
}
.video-containers video,.video-containers img {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
<p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p>
<div class="jpx-is-wrapper">
<div class="jpx-is-container">
<div class="jpx-is-content">
<div class="jpx-is-ad jpx-position-fixed">
<div scrolling="no" width="100%" height="100%" class="jcl-wrapper" style="border: 0px; display: block; width: 100%; height: 100%;">
<div class="video-containers" id="video-container">
<img src="https://via.placeholder.com/350x150" alt="" class="">
</div>
</div>
</div>
</div>
</div>
</div>
<p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p><p>Salman's arrest has created a wave of tension in Bollywood because of all his projects that were lined up, especially his most awaited film.</p>
Solution 5
I found maybe best solution for parallax effect which work on all devices.
Main thing is to set all sections with z-index greater than parallax section.
And parallax image element to set fixed with max width and height
body, html { margin: 0px; }
section {
position: relative; /* Important */
z-index: 1; /* Important */
width: 100%;
height: 100px;
}
section.blue { background-color: blue; }
section.red { background-color: red; }
section.parallax {
z-index: 0; /* Important */
}
section.parallax .image {
position: fixed; /* Important */
top: 0; /* Important */
left: 0; /* Important */
width: 100%; /* Important */
height: 100%; /* Important */
background-image: url(https://www.w3schools.com/css/img_fjords.jpg);
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<section class="blue"></section>
<section class="parallax">
<div class="image"></div>
</section>
<section class="red"></section>
user2874270
Updated on July 09, 2022Comments
-
user2874270 almost 2 years
I am building a webpage where I want the background image to scale to fit the whole screen, maintain aspect ratio and be fixed (so if you scroll down, the background image stays in the same place).
I have achieved this in desktop browsers with the CSS below, but it doesn't work on an iPhone or iPad. On those devices the background is too big (it continues below the fold) and if you scroll down far enough, the image will start repeating. Anyone have a fix? THanks!
HTML { background: url(photos/2452.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
-
asimovwasright about 8 yearsNicely done man! So far this has been the only solution for iOS that works.
-
user1931751 over 7 yearsshould be accepted, confirmed working in latest opera mini, chrome mobile and firefox mobile.
-
DragonFire about 7 yearsflickers on scroll
-
Vincent about 7 years@DragonFire I haven't noticed such behaviour on my iOS device. Can you try using the methods described here?
-
DragonFire about 7 yearsok on android, when you put an image, the address bar on top takes some space, when you scroll down it takes whitespace equivalent to address bar, then after a second it removes the whitespace and get the image to cover that area
-
Pejs about 7 yearsI wish I could upvote more! Amazing, have been beating my head for hours! Works perfectly on safari and mobile chrome!
-
John Smith almost 7 yearsThis doesn't seem to work on Google Nexus with Nougat.
-
OMGDrAcula almost 7 yearsThis works somewhat, but breaks IE and Edge. If you have an element with a background-image with a negative z-index it jumps while scrolling constantly.
-
Duck over 6 yearsunfortunately this solution based on size is not good. It will fail if I browse in landscape with an iPad, specially if I use an iPad Pro 12" that is 1024x1366... and btw your code tests for 767 pixels but the regular iPad is 768.
-
Duck over 6 yearstested on iOS 11 and 10 and it is not working on both.
-
Ylama over 6 years@SpaceDog Then just add an media query based on that device. this was just to get the idea behind the solution.
-
Duck over 6 yearsanyway the solution does not work. I have tested on an iPad Pro using iOS 10 and 11 and the image continues to scroll.
-
Manoj almost 6 yearsGood Job Man. . . !
-
Stuckfornow over 4 years@Vincent Great job. This code works perfect for android even 5 years later.
-
Alex Rummel almost 4 yearsDisabling a user's ability to zoom in and out on a webpage is terrible web design practice, particularly on a mobile device that may already have a small screen that makes it difficult for those with poor eyesight to read off of.
-
Alex Rummel almost 4 yearsskrollr development ceased in 2014 and even states "mobile support always sucked (because mobile browsers are hard)." I strongly recommend referring to the accepted answer
-
Alex Rummel almost 4 yearsI'm having the same issue as DragonFire. When the address bar present on many different mobile browsers expands/retracts, the entire background image shifts. You can use some JavaScript to fix this (give the background image a fixed height equal to
innerHeight
on page load and only change it on window resize when the viewport width is changed), but this can have its own unintended consequences (if the address bar is visible on page load then the background is too small to fill the space once the address bar collapses). -
Sam Tyurenkov about 3 yearschange top: 0 to bottom: 0, to have it sticky to the bottom