navbar images

In bootstrap can i add rollover images to the nav bar or is it easier to custom make do this myself.

I did a custom menu with images as it works fine without issues but is there an easier way with bootstrap built in classes?

body{

margin:0;
padding:0;
line-height: 1.5em;
background-color:#96d4ff;
text-align:center;
 
}

#wrapper{
  max-width:980px;
   margin:auto;
 background-color :#dadbe5;
 border :1px solid gray;
}

 #heading{
	 height:240px;
	 /* width:980px;*/
	  background-size:100% 100%;
	  background-image:url(../img/head7.png);
	  background-repeat:no-repeat;
 }
 
 
 img, embed, object, video {

  max-width: 100%;
   
}

#head2 ul li 
{
     display: inline;
 }



#head2 ul
{
/*margin-left: 15%;*/
padding:0;
list-style-type: none;
border:none;
margin: 0;
float: right;
}	


#head2 ul li.welcome2 a {

  background:url(../img/redGrad.png); 100% 100% repeat-x;
  width:100px;
  height:50px;
	 
	 }
#head2 ul li.welcome2 a:hover {
	 background:url(../img/redGrad2.png); 100% 100% repeat-x;
  width:100px;
  height:50px;
  
}

#head2 ul li a
	{
	text-decoration: none;
	float:left;
	margin:0;
	border-right:grey solid 1px;

	}

<body>
<div id="wrapper">

<div class="container-fluid">
   
    <div class="row-fluid">
     
          <div class='span12'>
          <div id="heading">
          this is my heading
          </div>
          
          </div>
     </div>
          
          
   
    <div class="row-fluid">
     
          <div class='span12'>
   
     <div id="head2">
  <ul >
    <li class="welcome2"><a href="home.html"></a></li>
    <li class="welcome2"><a href="home.html"></a></li>
      <li class="welcome2"><a href="home.html"></a></li>
    <li class="welcome2"><a href="home.html"></a></li>
    <li class="welcome2"><a href="home.html"></a></li>
    <li class="welcome2"><a href="home.html"></a></li>
      <li class="welcome2"><a href="home.html"></a></li>
    <li class="welcome2"><a href="home.html"></a></li>
    <li class="welcome2"><a href="home.html"></a></li>
  </ul>
</div>

     </div>
     
      <div class="row-fluid">
     
     
      <div class='span6 main'>
          <h2>Sidebar</h2>
         fsdfsdfd sdfsd ddfd dsfffffffffffffffffffffffffffffffff f fsdfsdfd sdfsd ddfd dsfffffffffffffffffffffffffffffffff f
      </div>
      <div class='span6 sidebar'>
        <h2>Sidebar</h2>
        fsdfsdfd sdfsd ddfd dsfffffffffffffffffffffffffffffffff f fsdfsdfd sdfsd ddfd dsfffffffffffffffffffffffffffffffff f
     </div>
     </div>
    
	</div>
</div>
     
</div>

</body>
</html>

Open in new window

jagguyAsked:
Who is Participating?
 
Jagadishwor DulalBraces MediaCommented:
As your image name it seems it must be gradient background you can skip it just using gradient background in css like:

#head2 ul li.welcome2 a {

background: #a90329; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5MDMyOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzhmMDIyMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZDAwMTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-8 */
width:100px;
height:50px;
color:#fff;
	 
	 }
#head2 ul li.welcome2 a:hover {
 background: #6d0019; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZkMDAxOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzhmMDIyMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhOTAzMjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #6d0019 0%, #8f0222 60%, #a90329 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d0019), color-stop(60%,#8f0222), color-stop(100%,#a90329)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #6d0019 0%,#8f0222 60%,#a90329 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #6d0019 0%,#8f0222 60%,#a90329 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #6d0019 0%,#8f0222 60%,#a90329 100%); /* IE10+ */
background: linear-gradient(to bottom,  #6d0019 0%,#8f0222 60%,#a90329 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d0019', endColorstr='#a90329',GradientType=0 ); /* IE6-8 */
  width:100px;
  height:50px;
  color:#fff;

  
}

Open in new window


See reference site for gradient background.
http://www.colorzilla.com/gradient-editor/
0
 
Jagadishwor DulalBraces MediaCommented:
What is your background image?? Can you post image also.
0
 
jagguyAuthor Commented:
Thanks for that. I guess it isnt obvious why the css3 code is better as it looks like a lot more work and it just does a gradient.
I want to use an image which may not be a gradient.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.