background image does not cover whole body

Question

I have a background image for the body.

CSS:

* {
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  font-family: DaxOT, Helvetica, Arial, sans-serif;
  background-image: url("background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-color:#f00;
  font-size: 16px;
}

The image does not cover the whole page. (like it should with background-size: cover) The body has the right size. You see the red area left and right. The effect occurs with IE and Firefox.

Snippet:

 <html> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; border: 0; } html { width: 100%; height: 100%; min-height:100%; min-width:100%; } body { min-height:100%; min-width:100%; font-family: DaxOT, Helvetica, Arial, sans-serif; background-image: url("https://picload.org/thumbnail/darlclgr/fond_blau-verlauf.jpg"); background-repeat: no-repeat; background-position: center; -webkit-background size: cover; -o-background-size: cover; -moz-background-size: cover; background-size: cover; background-attachment: fixed; background-color:#f00; } </style> </head> <body></body> </html>

Answer 1

try adding the height to it

width: 100%;
height: 100%;

and for this to work you'll need to add height in html and body too. Like:

html, body{
min-height:100%;
min-width:100%;
}

If this don't work then add this to body:

-webkit-background size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size:cover;

background image does not cover whole body

Question

1 answers

solution1
0 2018-02-16 12:28:00

background image does not cover whole body

Question

1 answers

solution1 0 2018-02-16 12:28:00

solution1
0 2018-02-16 12:28:00