CODEWITHSUNDEEP
htmlcssresponsive-design
user7491337
user7491337

Reputation:

Full page background image cutting off top and bottom

I'm creating a website in which I need a full page responsive background image to display across all devices. I have created this image in Photoshop and it is 2560 x 1440 (16:9).

I have included white borders around the top, bottom, left and right of the image in stark contrast to the purple background to make it easier to see what's happening.

For some reason when using the code below, the top and the bottom of the image (the white borders) are being cut off.

This problem disappears when I use inspect element and set the viewport to 1920 x 1080 etc...

My monitor is set to 1920 x 1080 resolution and I am using the Opera browser, also tested in IE though.

Here's an image of what's happening - https://gyazo.com/fb5d44dfd5332e42f1406e1f427dbd4a

There should be equal width white borders on the top and the bottom but for some reason there's not.

Any and all help appreciated.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
    <link rel="stylesheet" href="css/styles.css">
    <title>Hello, world!</title>
  </head>
  <body>
  </body>
</html>

html { 
background: url(../media/placeholder.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Upvotes: 0

Views: 572

Answers (1)

Chris Barr
Chris Barr

Reputation: 33972

It's because you are using background-size: cover it's doing exactly what it should. It will 100% "cover" the element leaving no "empty" space around it no matter how it's resized, and it might cut things off.

Try using background-size: contain instead, that might be more of what you are looking for. 100% of the image will always be visible, but it might leave some blank spaces around it.

Here's a good demo of each background-size option and how it looks https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

FYI, you do not need to include the different vendor prefixes (-o-*, -moz-*, and -webkit-*) for this feature, it's pretty well supported (unless of course you need to support IE8, Firefox 3, etc.)

Upvotes: 1

Related Questions