CSS two background for UL LI - HTML CSS CSS Property

HTML CSS examples for CSS Property:background

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background

Description

CSS two background for UL LI

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#right_navigation_container ul{
   margin-left:10px;
   margin-right:10px;
}
#right_navigation_container ul li a{
   color:black;
   text-decoration:none;<!--  w  w  w .j  a v a  2s  . c  o m-->
   padding-right:10px;
}
#library_one{
   background:url("https://www.java2s.com/style/demo/Google-Chrome.png") no-repeat;
   background-position: 7px 10px;
}
#library_two{
   background:url("https://www.java2s.com/style/demo/InternetExplorer.png") no-repeat;
   background-position: 7px -28px;
}
#library_three{
   background:url("https://www.java2s.com/style/demo/Google-Chrome.png") no-repeat;
   background-position: 7px -70px;
}
#library_four{
   background:url("https://www.java2s.com/style/demo/InternetExplorer.png") no-repeat;
   background-position: 7px -110px;
}
#right_navigation_container ul li{
   padding:10px 0 10px 30px;
   border:solid 1px #EAE7E1;
   margin-top:13px;
   border-radius: 10px;
   background: -moz-linear-gradient(270deg, #EDEBE8 20%, #EDEBE8 45%, #FCFBFA 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #EDEBE8), color-stop(45%, #EDEBE8), color-stop(100%, #FCFBFA));
   background: -webkit-linear-gradient(270deg, #EDEBE8 20%, #EDEBE8 45%, #FCFBFA 100%);
   background: -o-linear-gradient(270deg, #EDEBE8 20%, #EDEBE8 45%, #FCFBFA 100%);
   background: -ms-linear-gradient(270deg, #EDEBE8 20%, #EDEBE8 45%, #FCFBFA 100%);
   background: linear-gradient(180deg, #EDEBE8 20%, #EDEBE8 45%, #FCFBFA 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EDEBE8', endColorstr='#FCFBFA',GradientType=0 );
}
#gradientImage{
   position:absolute;
   width:100%;
   height:100%;
   top:0;
   left:0;
   background:red;
   opacity:0.5
}
#library_four{
   background:green !important;
   position:relative;
}


      </style> 
 </head> 
 <body> 
  <div id="right_navigation_container"> 
   <ul> 
    <li id="library_one"> <a href="#">library</a> </li> 
    <li id="library_two"> <a href="#">library</a> </li> 
    <li id="library_three"> <a href="#">library</a> </li> 
    <li id="library_four"> 
     <div id="gradientImage"> 
      <a href="#">library</a> 
      <div> 
      </div> 
     </div> </li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials