Prevent background image from resize on scrolling

Question

I have background image that is resizing a little bit when I scroll from the top on mobile devices. And it returns to its size when I scroll to the top again. You can see it here

I tried using

background-attachment: fixed;

besides all the other css code you can see below but it did not work.

css

.bg-1, .bg-2, .bg-3,
.bg-1:after, .bg-2:after, .bg-3:after { 
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0; 
}

.bg-1 li span, .bg-2 li span, .bg-3 li span { 
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 1;
  z-index: 0;
}

.bg-1 li span { background-image: url(../images/slide-1.jpg); }
.bg-2 li span { background-image: url(../images/slide-3.jpg); }
.bg-3 li span { background-image: url(../images/slide-2.jpg); }

ol,ul {
  list-style:none;
}

html

 <body>

  <ul class="bg-2">
    <li><span></span></li>
  </ul>

  <nav class="navbar">
    <div class="container-fluid social-nav">

  ...

Just to explain, it is a list because if I want to make a slide gallery it works adding more

<li><span></span></li>

But I use slide only in home page.

How can I prevent that resizing?

The example given works as described, as in the image doesn't move and the content scrolls over it. Is that what you are expecting? If so, what browser are you using? Have you tried it in other browsers? — Alex, Jan 07 '17 at 18:59
`background-attachment: fixed;` is disabled in most mobile browsers because it's quite resource intensive. There are however way around it, take a look at this: http://stackoverflow.com/questions/26372127/background-fixed-no-repeat-not-working-on-mobile — Alex, Jan 07 '17 at 19:05

score 2 · Answer 1 · answered Nov 09 '17 at 20:00

If the background-image is resizing on initial scroll, I assume the element with that background must have a dynamic height, generated using either vw/vh in the CSS or JS/jQ script. I ran into this same problem, and I found what I believe to be the correct method in resolving this issue (at least until mobile browsers provide their own workaround).

Using a simple jQuery function, you can store the window's width on page load, and use that to restrict the container's resizing function to viewport sizes wider than the desktop breakpoint (992px+) and narrower viewports so long as the viewport width changes, not just the height. This way, on mobile and tablet devices, when you scroll, there is only a vertical viewport resize, so the resize function is not triggered.

var breakpoint = 991;
var bgHeight = function() {
    $('#bg').css('height', $(window).height() + 'px');
}; bgHeight();
var windowWidth = $(window).height();
$(window).on('resize', function() {
    if ((($(this).width() <= breakpoint) && ($(this).width() != windowWidth))
        || ($(this).width() > breakpoint)) {
        bgHeight();
    }
    windowWidth = $(window).width();
});

CodePen: https://codepen.io/brandonmcconnell/pen/jayYbB

score 0 · Answer 2 · edited May 23 '17 at 11:46

0

Take a look at background: fixed no repeat not working on mobile.

I believe the main difference is the z-index=0, try changing it to -10.

edited May 23 '17 at 11:46

Community

1
1

answered Jan 07 '17 at 19:06

Alex

878
3
16
34

Prevent background image from resize on scrolling

2 Answers2

Linked