0

I'm trying to put an image as a background of my project insde the body component, but when I reduce the screen width the image doesn't overflow correctly. This is what I have now:

enter image description here

the css is:

body {
  background-image: url("https://phoenix-engineering.be/wp-content/uploads/2019/07/shutterstock_1113165392.png");
  background-size: cover;
  overflow: hidden;
  background-position: unset;
  background-repeat: no-repeat;

  text-align: center;
  font-family: "Roboto", sans-serif;
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;

  min-width: 350px;
}

and when I resize the screen it results to this:

enter image description here

Is there a way to fix this issue?

Ibrahim
  • 131
  • 2
  • 12
  • 1
    Have you checked how large the `body` element itself is? (`height:100%` doesn't necessarily mean it will take up the whole window) – DBS May 25 '22 at 12:38
  • Hello DBS, no I havent, can you tell me how exactly to do that? – Ibrahim May 25 '22 at 12:39
  • 1
    The easiest way to check in the dev tools would be to hover over the `` in the DOM, it should highlight the element. If it's not taking up the whole window, you may need to adjust the `height` of `html` ([Relevant question](https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height)) – DBS May 25 '22 at 12:41
  • I just checked and it seems it doesnt highlight the whole window, but also when I hover over the html component it alsoe doesnt highlight the whole window, is there a way to fix that? – Ibrahim May 25 '22 at 12:44
  • 1
    Have a look at the question I linked in the previous comment, it covers basically every different solution to this issue. – DBS May 25 '22 at 12:45

1 Answers1

1

use min-height:100vh

body {
  //prev_styles

  min-height:100vh; <-
}
Manoj Jasoliya
  • 61
  • 4