CODEWITHSUNDEEP
htmlcssbackground-image
mafu
mafu

Reputation: 32680

HTML Background image changes size when scrollbar appears

I'm using this background image on all pages of my website:

body {
    background-image:url('...');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

This works perfectly per single page. However, when switching between pages with and without a vertical scroll bar, the page width changes, and this causes the background image to change in size slightly to scale accordingly.

This small transition is unpleasant, and I would like to avoid it. How would I do that? I there a way to let the background image 'ignore' the space taken by the scroll bar?

Upvotes: 3

Views: 3479

Answers (2)

Perttu
Perttu

Reputation: 171

I faced the same issue and gave my everything to solve it by plain CSS. Every solution failed somehow. Eventually I decided to create a small JavaScript snippet that utilizes 100vw and 100vh units to get rid of background jumping when switching between pages that have or don't have vertical scrollbar.

If you use background-size: 100vw 100vh the background image won't keep its aspect ratio. Then again, if you use background-size: 100vw auto or background-size: auto 100vh the image will keep its aspect ratio, but might not always fill the whole screen depending on image and screen sizes.

This script will change cover to either 100vw auto or auto 100vh depending on which one will fill the whole screen. The script is rather light weight as it is executed once upon page load and again every time the window is resized.

// Function to change background size "cover" to
// either "100vw auto" (100 percent of viewport
// width and automatic height)
// or "auto 100vh" (automatic width and 100
// percent of viewport height).
fixBackgroundSizeCover = function(event) {

  var bgImageWidth = 3639,
    bgImageHeight = 2255,
    bgImageRatio = bgImageWidth / bgImageHeight,
    windowSizeRatio = window.innerWidth / window.innerHeight;

  if (bgImageRatio > windowSizeRatio) {
    document.body.style.backgroundSize = 'auto 100vh';
  } else {
    document.body.style.backgroundSize = '100vw auto';
  }
};

// Execute the fix function once upon load
fixBackgroundSizeCover();

// Execute the fix function everytime on window resize
window.addEventListener('resize', fixBackgroundSizeCover);

// A test button to toggle body vertical scrollbar on and off
document.getElementById('toggle-body-vertical-scrollbar-btn').addEventListener('click', function(event) {
    if(document.body.classList.contains('force-scrollbar')) {
      document.body.classList.remove('force-scrollbar');
    } else {
      document.body.classList.add('force-scrollbar');
    }
});
body {
  background-image: url("https://unsplash.com/photos/Fr9WHTRMY5A/download");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* The following is related to the toggle body vertical scrollbar button */
body.force-scrollbar {
  min-height: 2000px;
}

#toggle-body-vertical-scrollbar-btn {
  position: fixed;
  top: 10px;
  left: 10px;
  padding: 10px;
  background: rgba(255,255,255,.7);
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 2px rgba(0,0,0,.2);
  color: #222;
  font-family: sans-serif;
  cursor: pointer;
}

#toggle-body-vertical-scrollbar-btn:hover {
  background: rgba(245,245,245,.85);
  box-shadow: 0 1px 1px rgba(0,0,0,.2);
}
<button id="toggle-body-vertical-scrollbar-btn">
    Toggle body vertical scrollbar
</button>

The code snippet has hard coded background image width and height as the image size is known beforehand. If you load dynamic background images you need to calculate the background image aspect ratio in some way.

https://jsfiddle.net/perttumyry/0csjk8yo/

Upvotes: 1

user5941777
user5941777

Reputation:

add your own scroll bar over it and the browser won't then add another one in once you scroll

If you don't know how here is what code to use - https://css-tricks.com/custom-scrollbars-in-webkit/

or use and make your own - http://mikethedj4.github.io/Webkit-Scrollbar-Generator/

Upvotes: 0

Related Questions