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
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?
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 it
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.