Garrett Henry Garrett Henry - 4 months ago 9
HTML Question

Is it possible to use the same image twice in the background property?

I am making a navigation list, and I was wondering if there is a way to use the background property in css to place the image on both sides of the link when the user hovers over it. Here is what I have currently:

nav.vertical li a:hover {
background: #D4CD00 url(wnaderknight.png) right/25px 25px no-repeat;
color: black;
}

Answer

You may use multiple backgrounds or pseudos

.bg {
  display:inline-block;
  padding:30px;
  background:url(http://www.icone-gif.com/icone/nature/terre/terre-32.png) right/25px 25px no-repeat,url(http://www.icone-gif.com/icone/nature/terre/terre-32.png) left/25px 25px no-repeat
}
.psdo:before,
.psdo:after {
  vertical-align:middle;
  display:inline-block;
  content:url(http://www.icone-gif.com/icone/nature/terre/terre-32.png)
}
<a href="#" class="bg"> link with bg image on both sides </a> <br/>
<a href="#" class="psdo"> link with bg image on both sides </a>