Styling the background of an Element HTML

Question

I am making a website and I am trying something new, except when I try to create a background for my H1 element I have no way of making sure the background color borders fit to the top of the screen, left and right.

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="site.css"
<body>
<title>Test Tab</title>
<div class="main">
    <h1>Website Heading</h1>
</div>

</body>
</html>

.main {
 font-family: Arial, Verdana, sans-serif;
 text-align: center;
 font-size: 20px;
 background-color: #00ff00;
 background-position: 10px;
}

Answer 1

You need to change your CSS to this:

html,body {
  margin:0;
  padding:0;
}
.main {
 font-family: Arial, Verdana, sans-serif;
 text-align: center;
 font-size: 20px;
 background-color: #00ff00;
 background-position: 10px;
}

.main h1 {
  margin:0;
}

JSFiddle

You need to make sure you set your body to have no padding or margins and also make sure your h1 doesn't have any margin either. That way it will happily sit at the top of your page.

Styling the background of an Element HTML

Question

1 answers

solution1
2 2016-03-22 09:48:21

Styling the background of an Element HTML

Question

1 answers

solution1 2 2016-03-22 09:48:21

solution1
2 2016-03-22 09:48:21