0

So im using your typical background cover css code

-webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
  background-position: left top; 
  background-repeat: repeat;
  background-attachment: scroll;

Which works most of the time, unless i resize the window so its taller than it is wide, then this happens (it was my understanding that with size set to cover, it would just make the image taller, not create a white space underneath it)

blank473
  • 83
  • 1
  • 9
  • Try to put the declarations inside Media queries – Bassem Mustafa Dec 28 '17 at 15:09
  • The property value of `cover` *scales the image as large as possible **without stretching** the image*. See https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#cover To account for the whitespace below, an image with a large enough resolution or portrait orientation will be required. – UncaughtTypeError Dec 28 '17 at 15:09
  • Check this out https://stackoverflow.com/questions/36527639/background-size-cover-not-working-in-any-browser. – YATO Dec 28 '17 at 15:10
  • can you fiddle here? – Chandra Shekhar Dec 28 '17 at 15:16
  • i dont think its the size of the image that matters, since ive used background cover work on pages that are very long/tall, and the image simply stretches out, pixelating it, and cutting a lot from both left and right sides.... the thing about this page is im trying to not have the user scroll at all, just have the image fit the entire background, and have a div pop up that the user scrolls into.... the same thing doesnt seem to happen with this example https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php – blank473 Dec 28 '17 at 15:17
  • on my page, the image seems to keep resizing and getting shorter, without clipping the edges instead, while maintaining the same height that covers the entire page – blank473 Dec 28 '17 at 15:18
  • The links were helpful @blank473. The `html` element needs to occupy the full height of the viewport, e.g: `html { height: 100%;}` – UncaughtTypeError Dec 28 '17 at 15:27

1 Answers1

0

Try Removing 

background-attachment: scroll;

and add

background-attachment: fixed; background-position: left top !important;.

Hope This Helps.

Chandra Shekhar
  • 3,550
  • 2
  • 14
  • 22