Background image not covering whole screen

Question

I have recently been creating a link in-bio page and I am trying to make the background image cover the whole screen but it is only covering parts of the screen where I have objects like a header or list. Below I have the CSS code that I used to insert the background image.

body {
background: url(./942775.png) no-repeat center center fixed;
background-size: cover;

}

score 2 · Accepted Answer · answered Aug 25 '22 at 00:08

It's likely that your body element is not the full size of your viewport. Try stretching html and body to the full window:

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: url(https://www.nasa.gov/images/content/296150main_2-226.jpg) no-repeat center center fixed;
  background-size: cover;
}
main {
  color: white;
}

<main>Hello world</main>

Background image not covering whole screen

1 Answers1