How do I remove white space from around a body background image?

Question

I've used every trick in the poorly-documented book (bad joke pun intended) and there is still a white border around my background image. I am using Bootstrap but I've slapped important tags everywhere it counts, so I doubt that is what is causing the issue. If the issue can be resolved using Bootstrap 5, that would be great. I want to minimize the amount of CSS code I use in this project.

html, body {
  background-image: url("./background.gif");
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
  background-color: black;
  margin: 0!important;
  padding: 0!important;
  background-size: 100% 100%;
}

Screenshot of webpage

@WilliamFaircloth can you clear the browsercache? if that not works, it could be problems with other style declaration on your page. — Maik Lowrey, Jan 03 '22 at 23:34
it could be the aspect of your background image....can you try `background-size: cover;`? — Authentic Science, Jan 03 '22 at 23:54

score 1 · Accepted Answer · answered Jan 04 '22 at 01:13

1

Just remove the border classname on the first div child of body. This adds a 1px solid border by default.

It's working even without your margin and padding set to 0!important in body since you have a _reboot css that already resets the body to margin 0.

answered Jan 04 '22 at 01:13

Franrey Saycon

647
1
5
18

How do I remove white space from around a body background image?

1 Answers1

Related