0

I've got several divs on my webpage with background images. Currently it's what I want, but with white borders on the side and top/bottom (for those divs at the top/bottom of page).

This is the current situation:

My webpage - notice slight white border around photo

I'm trying to get it to fill the browser (instead of having borders), but none of the other suggestions are working for me. Below is my code for one div:

<div class="header-image">
    <img src="smesh-colour-hires.png">  
</div>

And CSS:

.header-image {
    background-image: url("animals-deep-ocean-deep-sea-130621.jpg");
    background-size: cover;
    background-position: center;
    height: 500px;
    margin: auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

.header-image img{
    max-width: 800px;
}

Let me know if anything doesn't make sense and I'll try my best to explain.

Any help would be much appreciated, this is really blocking me!

Uwe Keim
  • 39,551
  • 56
  • 175
  • 291
Adam Robertson
  • 13
  • 6

2 Answers2

0

The white border is probably due to the default margin on the body.

Try adding this in your CSS.

body {
    margin: 0;
}
emptyjayy
  • 494
  • 4
  • 10
0

Add this to the top of your CSS 

body, html {
  margin: 0;
  padding: 0;
}
Diego Vieira
  • 1,150
  • 2
  • 13
  • 31