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
Post a Comment