CODEWITHSUNDEEP
htmlcss
PiraTa
PiraTa

Reputation: 485

CSS two background

I have gradient background for li and I want also different img backgrounds for each li.

How can I do it?

ul li:

<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'><a href='#'>library</a></li>
     </ul>
</div>

CSS: 

 #library_one{
        background:url("../images/bg_cat_nav_right.png") no-repeat;
        background-position: 7px 10px;
    }
    #library_two{
        background:url("../images/bg_cat_nav_right.png") no-repeat;
        background-position: 7px -28px;
    }
    #library_three{
        background:url("../images/bg_cat_nav_right.png") no-repeat;
        background-position: 7px -70px;
    }
    #library_four{
        background:url("../images/bg_cat_nav_right.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 );
   }

JSFIDDLE

Upvotes: 1

Views: 59

Answers (2)

Johnbabu Koppolu
Johnbabu Koppolu

Reputation: 3252

You can combine background-image and gradient properties like below to have a background image and gradient applied on each li

#library_one {
    background:url("http://oi61.tinypic.com/5trnmh.jpg") 7px 10px no-repeat, linear-gradient(180deg, #EDEBE8 20%, #EDEBE8 45%, #FCFBFA 100%);
}

FIDDLE

Please apply browser prefixes as usual for the linear-gradient.

Upvotes: 1

Mohammad Kermani
Mohammad Kermani

Reputation: 5396

You can do this with two way:

1-addning your li in a div and set opacity or transparency for that. Other Answer

Example

<li id='library_four'>
      <div id="gradientImage">
               <a href='#'>library</a>
       </div>
 </li>

2-addnig a background-color and background-image for it

Upvotes: 1

Related Questions