Trying to make my header image cover left, top, and right sides in CSS

Question

How I can remove the edges, or enhance my header image to cover the left, top and right.

Project link on CodePen: http://codepen.io/ArizonaWarriorOne/pen/mJjBQM

.masthead-heading,
.masthead-intro {
  text-align: center;
}
.masthead {
  padding: 10em 0;
}
.masthead-intro {
  margin-bottom: 0.1em;
}
.masthead-heading {
  margin-top: 1.2em;
}
.masthead {
  background-image: url('http://jmdarter.com/wp-content/uploads/2012/11/Sonoran-Sunset-Flare.jpg');
  background-size: cover;
  border-top: 2em solid #FF6600;
  background-position: center;
 }

<header class="masthead">
  <p class="masthead-intro">Hi, I'm</p>
  <h1 class="masthead-heading">Tim</h1>
    
  </header>
<section>
</section>
<section>
</section>
<section>
</section>
<footer>
</footer>

The link did not come through – Rohit Gupta Jul 18 '15 at 00:10 — Rohit Gupta, Jul 18 '15 at 00:10
http://codepen.io/ArizonaWarriorOne/pen/mJjBQM – genuinearizona Jul 18 '15 at 00:15 — genuinearizona, Jul 18 '15 at 00:15

Maximillian Laumeister · Accepted Answer · 2015-07-18T00:18:51.093

The body element has an 8px margin around it by default in most browsers, so extra white space will appear around your page.

Add the following CSS rule to your codepen to get rid of the extra space that the body element has by default:

html, body {
  margin: 0;
}

Updated CodePen: http://codepen.io/maxlaumeister/pen/jPpYKm

Full code:

html, body {
  margin: 0;
}

.masthead-heading,
.masthead-intro {
  text-align: center;
}
.masthead {
  padding: 10em 0;
}
.masthead-intro {
  margin-bottom: 0.1em;
}
.masthead-heading {
  margin-top: 1.2em;
}
.masthead {
  background-image: url('http://jmdarter.com/wp-content/uploads/2012/11/Sonoran-Sunset-Flare.jpg');
  background-size: cover;
  border-top: 2em solid #FF6600;
  background-position: center;
 }

<header class="masthead">
  <p class="masthead-intro">Hi, I'm</p>
  <h1 class="masthead-heading">Tim</h1>
    
  </header>
<section>
</section>
<section>
</section>
<section>
</section>
<footer>
</footer>

Trying to make my header image cover left, top, and right sides in CSS

1 Answers1