Currently, I am in the process of working on a unique Wordpress template. One of the challenges I am facing is figuring out how to incorporate three background images for each <li> element in the dynamically generated navigation menu. Here are two examples for reference:
Here is an example of CSS code:
.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;
}
And another example of CSS for styling:
.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;
}
For the HTML structure:
<ul class="menu-item">
<li>ItemNumber1</li>
<li>ItemNumber2</li>
<li>ItemNumber3</li>
</ul>
I aim to have the outer background images remain without repeating while the middle background image repeats along the x-axis, but only within the boundaries of the other background images. When utilizing "repeat-x," as demonstrated in the second example, the middle image spans across the entire <li>. Since the menu text is generated dynamically, using <div> elements might not be feasible. Therefore, I believe I need to work solely with a <ul> structure without additional <div> elements. Any suggestions or assistance would be greatly appreciated.