0

I want to set a full size div in css but it keeps set margin.

As you can see, the background color i set on html is still visible.. how can you avoid this and make my div full size?

body,
html {
  height: 100%;
  background-color : red;
}

#front-bg {
  background-image: url('https://images.pexels.com/photos/270360/pexels-photo-270360.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  height: 100%;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#front-bg h1 {
  color: white;
  font-size: 5em;
  width: 100%;
  position: absolute;
  bottom: 15%;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>My site</title>
  </head>
  <body>
    <div id="front-bg">
      <h1>Stack Overflow</h1>
    </div>
  </body>

</html>
Maxime Girou
  • 1,511
  • 2
  • 16
  • 32

1 Answers1

1

try 

body,
html {
  height: 100%;
  background-color : red;
  margin: 0;
}
JakeKempo
  • 580
  • 1
  • 5
  • 14