CODEWITHSUNDEEP
htmlcss
mlunoe
mlunoe

Reputation: 4490

CSS3 background-image between <li> in a vertical list

I have list of #menu <li>'s like this:

<nav id="menu">
  <ul>
    <li><a>item 1</a></li>
    <li><a>item 2</a></li>
    <li><a>item 3</a></li>
    <li><a>item 4</a></li>
  </ul>
</nav>

and I want to add a image after each li element and one above the whole list using the background-image: url('../img/menu_divider.png'); property. Also I want to keep the size of the image even if it is replaced with a retina image in a @media only screen and (-webkit-min-device-pixel-ratio: 2) media query.

Upvotes: 0

Views: 754

Answers (1)

mlunoe
mlunoe

Reputation: 4490

Ok, so after trying different stuff I found that I could do something like this:

#menu ul > li {
  background: url('../img/menu_divider.png') no-repeat bottom left;

  -webkit-background-size: <image width> auto; /* Safari and Chrome */
  -moz-background-size: <image width> auto; /* Firefox */
  -ms-background-size: <image width> auto; /* Internet Explorer */
  -o-background-size: <image width> auto; /* Opera */
  background-size: <image width> auto; /* CSS3 */
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #menu ul > li {
    background-image: url('../img/[email protected]');
  }
}

And add this to add an image above the whole list:

#menu ul {
  background: url('../img/menu_divider.png') no-repeat top left;

  -webkit-background-size: <image width> auto; /* Safari and Chrome */
  -moz-background-size: <image width> auto; /* Firefox */
  -ms-background-size: <image width> auto; /* Internet Explorer */
  -o-background-size: <image width> auto; /* Opera */
  background-size: <image width> auto; /* CSS3 */
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #menu ul {
    background-image: url('../img/[email protected]');
  }
}

Upvotes: 1

Related Questions