HTML How do I make sure the header of my page is covered completely?

Question

My header does not fully covers my page making the background color overlaps them both together.

<!DOCTYPE html>
<html>
<head>
<style>
#header {
    background-color: black;
    background-size: 100% auto;
    margin-left: 0;
    margin-top: 0;
}
</style>
</head>

<body style="background-color: blue;">

        <div id="header">
    <p>hi</p>
    </div>

</body>
</html>

score 2 · Answer 1 · edited May 23 '17 at 12:09

2

This is because browsers have a default margin / padding. //edit HTML default body margin

Add this to your css

html,body{
padding:0;
margin:0;
}
p{
padding:0;
margin:0;
}

edited May 23 '17 at 12:09

Community

1
1

answered Apr 20 '17 at 07:06

AddcitedToLearn

398
2
18

missing
margin
– Tommy Apr 20 '17 at 07:10
@Tommy woops, ty added – AddcitedToLearn Apr 20 '17 at 07:13
Thanks for the support!! been trying to figure this out for hours – Darren Toh Apr 20 '17 at 12:54

Mattia Nocerino · Answer 2 · 2017-04-20T07:13:40.910

1

You need to set both html and body height, then #header height, like so

html, body, #header {
  height: 100%;
  margin: 0;
  padding: 0;
}

#header {
  background-color: blue;
}

p{
  margin: 0;
  padding: 0;
}

<div id="header">
<p>
Hi!
</p>
</div>

edited Apr 20 '17 at 07:13

answered Apr 20 '17 at 07:08

Mattia Nocerino

1,474
1
16
33

score 0 · Answer 3 · answered Apr 20 '17 at 07:13

0

If you inspect the html and check the CSS applied to body tag, you will see that it has a default margin: 8px. You will have to make it 0.

Use margin: 0px to set the new margin to body tag.

answered Apr 20 '17 at 07:13

Charul

450
5
18

score -1 · Answer 4 · answered Apr 20 '17 at 07:12

-1

Firefox (for example) indicates that there is a "border" of 8. Adding border: 0 to body's style made the thin blue borders to the left and right disappear. Is that what you wanted?

answered Apr 20 '17 at 07:12

U. Windl

3,480
26
54

HTML How do I make sure the header of my page is covered completely?

4 Answers4