0

I have a basic HTML page that contains one div in my body: Container. There is a background image that I'm using to cover the entire width of the page. However, the image doesn't cover the entire page instead it leaves a margin around the top, bottom, left, and right.

In addition, I added an overlay using Container::After, but it also doesn't cover the entire image - it leaves a margin too.

Solutions I tried:

Doing some research, I found that HTML displays elements using inline. So, I tried changing the display to flex. In addition, I even tried to float my container to the left. However, nothing worked. The only thing that worked was adding negative margins to my container and the whitespace was removed. However, when I added an h2 element - the whitespace came back.

I'm not sure what is occurring here? Any suggestions would be great. Below is my jsfiddle: https://jsfiddle.net/fun_code11/zcqm1w5u/2/

.container{
  background-image: url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  height: 600px;
  margin-top: -10px;
  margin-left: -10px;
  margin-right: -10px;
}


.container::after{
  content: " ";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
traveler316
  • 97
  • 3
  • 11
  • you have the body margin, the h2 margin and a margin collapsing – Temani Afif Nov 26 '19 at 22:55
  • The question has been closed because it's too broad however here is a working example: https://jsfiddle.net/wf6701ru/2/. Your issue is with heights & widths starting at html down to your container. – Adam H Nov 26 '19 at 22:55
  • @AdamH it's not too broad, it's closed as duplicate and you don't need height/width like you said because the element is position:absolute – Temani Afif Nov 26 '19 at 22:58

1 Answers1

0

You should remove the top margin from the h2. That causes the whitespace. You can do sth like h2 { margin-top:0 }

Armedin Kuka
  • 665
  • 4
  • 10