I wanted to make a background image being fully visible in all resolutions. It was suggested to me to use this code to achieve it:

body {background:none !important;}
.header-outer { background: #fff url(http://idevsky.com/images/1.jpg) no-repeat
center center;background-size: contain;width: 100vw;height: calc(100vw / 1.5);}

It does show the image the way I want, but there's an unwanted "side-effect" to it for some reason. Now I get a small horizontal scrolling. So my question is how to avoid it? Here's the site's URL:



No need to contain the background image or set the width. Simply set the height of the element to the viewport height and then make the background cover this area:

.header-outer {
    background: #fff url(http://idevsky.com/images/1.jpg) no-repeat center center;
    background-size: cover;
    height: 100vh;
  • If you meant to remove the old code in custom.css and embed yours, then after that the image is gone alogether, but the horizontal scrolling stayed, so I reverted the change.
    – Gregory
    Aug 12 '16 at 14:48
  • Could you please apply my change again and let me know once done so I can inspect the source code again
    – Lodder
    Aug 12 '16 at 14:49
  • Now after I removed my code and put back yours, the image is there and there's no horizontal scrolling, but the image is set too high, so you can't see even the head of the woman on the picture or her right hand.
    – Gregory
    Aug 12 '16 at 15:04
  • That's what happens under MY resolution, which is 1366x768
    – Gregory
    Aug 12 '16 at 15:06
  • Seems perfectly fine for me if I set my browser viewport to those dimensions. If you have your browser inspector open, then close it
    – Lodder
    Aug 12 '16 at 15:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.