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


how can remove edges, or enhance header image cover left, top , 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 body element has 8px margin around default in browsers, white space appear around page.

add following css rule codepen rid of space body element has 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>


Comments

Popular posts from this blog

qt - Using float or double for own QML classes -

Create Outlook appointment via C# .Net -

ios - Swift Array Resetting Itself -