css - Background not displaying html -
i trying have background picture display behind header. reason image not displaying. new html , css have got background image display on other occasion. missing or have change lines? appreciated, thanks!
here html code:
<html> <body> <header> <div class="logo"> <h1>my logo</h1> </div> <nav> <ul> <li><a href="">home</a></li> <li><a href="">about me</a></li> <li><a href="">contact</a></li> </ul> </nav> </header> <section class="home-main"> <div class="container"> <h1>this foo</h1> </div> </section> </body> </html>
and here css:
@import url('https://fonts.googleapis.com/css?family=raleway:300,400,700,900'); * { box-sizing: border-box; } body { margin: 0; font-family: 'raleway', sans-serif; text-align: center; } img { max-width: 100%; height: auto; width: auto; } .container { width: 95%; max-width: 70em; margin: 0 auto; } .clearfix::after, section::after { content: ''; display:block; clear:both; } /* typography ================= */ .unstyled-list { margin: 0; padding: 0; list-style-type: none; } /* header ================= */ header { position: absolute; left: 0; right: 0; margin: 1em; } .logo { font-size: 1em; margin-left: 1em; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; margin: 1em; padding: 0.125em; } nav { font-weight: 900; text-decoration: none; text-transform: uppercase; font-size: .8rem; padding: .75em; } @media(min-width:40rem) { .logo { float: left; } nav { float: right; margin-top: 1em; } } @media(min-width:60rem) { .logo { font-size: 1.3em; margin-top: -.5em; } nav { margin-top: 1em; } nav { font-size: 1.04em; } } /* home-main ================= */ .home-main { background-img: url('../manjitcss/img/manjit-main.png'); background-size: cover; background-position: center; padding: 10em 0; }
@ankit, class home-main
needs change background-img
property background-image
. there no alias background images called background-img
. see mdns reference background-image
css property.
i created codeply project code , modified property using correct name. can view here.
corrected property:
.home-main { background-image: url('http://via.placeholder.com/350x150'); background-size: cover; background-position: center; padding: 10em 0; }
Comments
Post a Comment