Ad

How Do I Remove White Space From Around A Body Background Image?

- 1 answer

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

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad