CSS3 multiple backgrounds, one repeating in ul

2 Views

I am working on a WordPress template. I am trying to implement 3 background images to be used for each <li> in the nav menu, which is generated dynamically. Take a look at the two examples.

http://preahkumpii.com/misc/test01/hi.html
http://preahkumpii.com/misc/test02/hi.html

Read More

First Example CSS: 

.menu-item li {
  background-image: url(images/menu-left.png), url(images/menu-right.png), url(images/menu-center.png);
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

Second Example CSS: 

.menu-item li {
  background-image: url(images/menu-left.png), url(images/menu-right.png), url(images/menu-center.png);
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
}

HTML: 

<ul class="menu-item">
  <li>ItemNumber1</li>
  <li>ItemNumber2</li>
  <li>ItemNumber3</li>
</ul>

I want the two outer bg images to stay where there are with no repeat. But, I want the middle bg image to repeat along the x-axis, but only extend to the other bg images. As you can see in the second example, when the middle image is given repeat-x it extends across the entire <li>. As far as I know, I cannot use <div> to make this happen because the text for the menu is generated on the fly. So, I assume I must have only a <ul> without a bunch of <div>s hanging around. Any help?

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. hey you can use the after-before pseudo class for your desired results.

    See the CSS how i made it :-

    CSS

    .menu-item li:after {
    background: url("images/menu-center.png") repeat-x scroll 0 0 transparent;
    bottom: 0;
    content: " ";
    left: 20px;
    position: absolute;
    right: 20px;
    top: 0;
    z-index: -1;
}
.menu-item li {
    background-image: url("images/menu-left.png"), url("images/menu-right.png");
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;
    display: inline-block;
    height: 56px;
    line-height: 56px;
    min-width: 60px;
    padding: 0 20px;
    position: relative;
    text-align: center;
    z-index: 1;
}

    See the output how i have done itenter image description here