CODEWITHSUNDEEP
htmlcss
Matt
Matt

Reputation: 55

Styling the background of an Element HTML

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;
}

Upvotes: 1

Views: 35

Answers (1)

Albzi
Albzi

Reputation: 15609

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.

Upvotes: 2

Related Questions