-6

When I set background-image for <body>, the background image is larger then the body and the html size. Why is that?

html {
    height: 0;
}

body {
    height: 0;
    background-image: url(https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg);
}

But the image occupies the entire area viewport. I don't want fix it. I want to know why background-image for body has this behavior

Sergey
  • 1
  • 1
  • 2
    Please update your questions to provide a minimal, reproducible example https://stackoverflow.com/help/minimal-reproducible-example – Ted Whitehead Aug 06 '19 at 19:55
  • 2
    Because you probably assigned a large image to the background. If you want the image to fit, use the property `background-size: contain` – Ibu Aug 06 '19 at 19:56
  • @Ibu It seems to be the answer. Why don't you post it? – Meraj al Maksud Aug 06 '19 at 19:57
  • 2
    Because it is an assumption, and the OP hasn't provided enough details to answer for sure. – Ibu Aug 06 '19 at 19:58
  • I have to say that this question is a common one, and not worthy of the down-votes it has received. The question is clear, and the behaviour is reproducible from the code supplied. For the answer though, see the duplicate. – Alohci Aug 06 '19 at 21:12

1 Answers1

1

UPDATE:

html {
    height: 0px;
}

body {
    height: 0px;
    background-image: url(https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg);
  background-size:contain;
  background-repeat:no-repeat
}

Is this what you want?

OLD

Can u try maybe to add

overflow: hidden;

or

background-size:100%

or

background-size: contain

or

background-size: cover

or maybe anything about. Please showcase part of code that peoples here can help you

BrunoAFK
  • 116
  • 4