How to remove the unwanted white border around css background-image of a section element:

Question

I want the image to fully cover a section, however, get an unwanted white border around it. If I style the element, the white border isn't present, but the moment I try to do the same for a element, a white border/margin/padding appears.

Already tried setting margin, border, and padding to 0, yet the border remains around the image.

<--CSS Code-->

section {
  min-height:100vh; width:100%; margin:0; padding:0; border:0;
  background-image: url(https://images.squarespace-cdn.com/content/v1/54e7a1a6e4b08db9da801ded/7f2dae36-5650-4b84-b184-684f46fe68aa/98.jpg?format=750w);
   background-position: center center;
   background-repeat:no-repeat;
   background-size: cover;
   position:relative}

(If I replace section with body, the border is gone/'problem solved, however I want to style section, not body)

score 0 · Accepted Answer · answered Jul 14 '22 at 11:25

Make body (or the container of the section) with margin 0

section {
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-image: url(https://images.squarespace-cdn.com/content/v1/54e7a1a6e4b08db9da801ded/7f2dae36-5650-4b84-b184-684f46fe68aa/98.jpg?format=750w);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative
}

body {
  margin: 0
}

<section>
</section>

How to remove the unwanted white border around css background-image of a section element:

1 Answers1