html - Dropshadow not appearing on background-image div -
i'm having issue drop shadow not showing on header , i'm not sure if has background-image tag or being in div. it's header section @ top surrounded in homeheader div , shadow below isn't showing. here's css header;
#homeheader { text-align: center; font-family: 'lato'; color: white; width: 100%; height: 380px; background-image: url(http://i.imgur.com/zjv1pxt.jpg); -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49); -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49); box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49); }
the webkit-box-shadow, moz-box-shadow , box-shadow don't seem have effect on div , can't seem find out why.
i'm still new coding in general thank helps out!
edit: html;
<div id="homeheader"> </br> <!--nav bar @ top right--> <div id="navcontainer"> <ul> <li><a href="home.html">home</a></li> <li><a href="portfolio.html">portfolio</a></li> <li><a href="about.html">about</a></li> <li><a href="#">resume</a></li> <!-- need direct --> <li><a href="#" class="mybutton">contact</a></li> <!-- need direct --> </ul> </div> </br></br></br></br> <!--main header/title--> <h1 class="name"> name</h1> <h4 class="description">amateur html/css/js dev</h4> <!--two buttons below--> <a href="#" class="mybutton">contact</a> <a href="#" class="mybutton">resume</a> </br></br></br></br></br></br> <!--down arrow button--> <a data-scroll href="#content"><img src="http://i.imgur.com/dasbdv5.png" align="center" width="32"></a> </div>
the background-image
property not formatted correctly. should be:
#homeheader { text-align: center; font-family: 'lato'; color: white; width: 100%; height: 380px; background-image: url('http://i.imgur.com/zjv1pxt.jpg'); -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49); -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49); box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49); }
see following w3schools rerence http://www.w3schools.com/cssref/pr_background-image.asp
Comments
Post a Comment