elverdugo00
New member
This is my html code
<DIV id="top_gradient"> </DIV>
<DIV id="top_image"> </DIV>
and this is my css
div#top_image { width: 100%; position: relative;
margin: -5em -5em 0 -5em; padding: 0 5em;
height: 100px;
background-image: url('../images/dandy.jpg');
background-position: 0px -45px;
z-index: -1;
border-bottom: 1px solid #999;
box-shadow: 0 5px 50px -3px #000;
-webkit-box-shadow: 0 -5px 50px 0px #000;
-moz-box-shadow: 0 13px 20px -20px #000;
overflow: hidden;
}
div#top_gradient {
position: absolute;
height: 150px;
width: 100%;
margin: -5em -5em;
background: #fff;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eaeaea), to(#FFFFFF));
background: -moz-linear-gradient(0% 100% 90deg,#FFFFFF, #EAEAEA);
z-index: -2;
}
The problem is that the image isn't displaying. Any clue why?
<DIV id="top_gradient"> </DIV>
<DIV id="top_image"> </DIV>
and this is my css
div#top_image { width: 100%; position: relative;
margin: -5em -5em 0 -5em; padding: 0 5em;
height: 100px;
background-image: url('../images/dandy.jpg');
background-position: 0px -45px;
z-index: -1;
border-bottom: 1px solid #999;
box-shadow: 0 5px 50px -3px #000;
-webkit-box-shadow: 0 -5px 50px 0px #000;
-moz-box-shadow: 0 13px 20px -20px #000;
overflow: hidden;
}
div#top_gradient {
position: absolute;
height: 150px;
width: 100%;
margin: -5em -5em;
background: #fff;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eaeaea), to(#FFFFFF));
background: -moz-linear-gradient(0% 100% 90deg,#FFFFFF, #EAEAEA);
z-index: -2;
}
The problem is that the image isn't displaying. Any clue why?