How to position background image on list item?

I am building a styled accordian using jQuery and CSS code is attached below

The accordion is made up of around 25 <li> items (30px high) and has off and over states. For the different states I am using 2 large images that are the same height (750px) as the 25 <li> items positioned below each other. I have the roll-over and roll-off code working fine it is more the positioning of the background image on each <li> that I need help with.

So what I need to do is adjust the background image by 30 px for each <li> item so that when viewed on the page the list items make up the complete background image in rows.

Please see the attached image to see what I mean. :)

 Background image for accordion
<style>
ul.menu, ul.menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
}

ul.menu a {
  display: block;
  text-decoration: none;	
}

ul.menu li {
  margin-top: 3px;
}

ul.menu li a, ul.menu ul.menu li a {
  background:url(/imgs/layout/accordian_off.png) no-repeat ;
  color: #fff;	
  padding:6px 0px 6px 40px;
}

ul.menu li a:hover, ul.menu ul.menu li a:hover {}

ul.menu li ul li a, ul.menu ul.menu li ul li a {
  background: #ccc;
  color: #000;
  padding-left: 20px;
}

ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
  background: #aaa;
  border-left: 5px #000 solid;
  padding-left: 15px;
}
ul.menu ul.menu li a:hover {
    border-left: 0;
    padding-left: 0.5em;
}
ul.menu ul.menu {
    border-left: 5px #f00 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
    text-decoration: none;
	background:url(/imgs/layout/accordian_over.png) no-repeat;}
div.panel {
    padding: 0px;
    margin-top: 3px;
}
/* Panel styling van be found in layout.css below the css for #contentwrapper.which1 */

ul.menu div.panel a, ul.menu div.panel li a:hover  {
    display :inline;
    color: #3d2d78;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    font-weight: normal;
}
ul.menu div.panel a:hover {
    color: #3d2d78;
    text-decoration: underline;
}


.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
.indent3 { padding-left: 3em; }
.indent4 { padding-left: 4em; }
.indent5 { padding-left: 5em; }
.indent6 { padding-left: 6em; }
.indent7 { padding-left: 7em; }
.indent8 { padding-left: 8em; }
.indent9 { padding-left: 9em; }
.indent10 { padding-left: 10em; }
</style>

<ul class="menu">
		<li>
			<a href="#">LINK 1</a>
			<div class="acitem panel">
			<p>This contains stuff</p>
			<p>There can be <a href="http://www.i-marco.nl/">links</a> too</p>
			<ul>
				<li>blerk</li>
				<li>wonk</li>
				<li><a href="#">meh</a></li>
			</ul>
			</div>
		</li>
        <li>
			<a href="#">LINK 2</a>
			<div class="acitem panel">
			<p>This contains stuff</p>
			<p>There can be <a href="http://www.i-marco.nl/">links</a> too</p>
			<ul>
				<li>blerk</li>
				<li>wonk</li>
				<li><a href="#">meh</a></li>
			</ul>
			</div>
		</li>
        <li>
			<a href="#">LINK 3</a>
			<div class="acitem panel">
			<p>This contains stuff</p>
			<p>There can be <a href="http://www.i-marco.nl/">links</a> too</p>
			<ul>
				<li>blerk</li>
				<li>wonk</li>
				<li><a href="#">meh</a></li>
			</ul>
			</div>
		</li>
        <li>
			<a href="#">LINK 4</a>
			<div class="acitem panel">
			<p>This contains stuff</p>
			<p>There can be <a href="http://www.i-marco.nl/">links</a> too</p>
			<ul>
				<li>blerk</li>
				<li>wonk</li>
				<li><a href="#">meh</a></li>
			</ul>
			</div>
		</li>
	</ul>

Open in new window

swgdesignAsked:
Who is Participating?
 
bastianrConnect With a Mentor Commented:
If I understand this, you will need to make sure your CSS boxes for the <a> tags overlay the image precisely. Without seeing more CSS I'm not sure if that's working as you want but once it is, you then need to offset the bg image for each link. Each <a> needs a hook so you could add an id as below.

<ul class="menu">
<li>
<a href="#" id="link01">LINK 1</a>
...
<a href="#" id="link02">LINK 2</a>

Your CSS would look something like this:

ul.menu li a#link01 {
background-position: 0px 0px;      
}
ul.menu li a#link02 {
background-position: 0px -20px;      
}
ul.menu li a#link03 {
background-position: 0px -40px;      
}
ul.menu li a#link04 {
background-position: 0px -60px;      
}

I think you'll need to tweak the numbers and clean up the image a bit to get things more precise. Maybe use a .png or .gif for the image format.
0
 
Eternal_StudentCommented:
If the image and list elements are a fixed height anyway, why not just save the image as a background image without the arrows and then create a class for the arrows on the list elements so something like the below:

That way you simplify the CSS and dont need to create loads of styles for each list item.

<div id="large-image">

<ul>
<li class="arrow-on"></li>
...
</ul>

</div>

Open in new window

0
 
swgdesignAuthor Commented:
In my question I state that it is a JQuery accordion that utilises a <ul> as it's display tag.

So, if an item in the accordion is expanded the bottom list items would not be over the background image!
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
Eternal_StudentCommented:
So when they are expanded, what does the extra space look like? Do you have a screen shot of the expanded state?
0
 
swgdesignAuthor Commented:
External student: when expanded a div of content(text and images) is shown below the list item that was expanded. Hence why the background image won't work. (I've already tried it)

Bastianr: I totally understand what you're saying; I would need to use a class for each individual list item and then adjust the background-position for each list item.

I did think of this, but wondered if there was a more dynamic solution...
0
 
bastianrCommented:
Yeah, the CSS could get lengthy. You could use JavaScript to set the styles as well to make things dynamic and more compact. You could loop through the links and set the packground position offsets dynamically. You probably want a class or some other hook to more easily isolate the elements for the style. Here's an example with jQuery:

<!-- set class on target links for convenient JS hook -->
<a href="#" class="parent-link">LINK 1</a>
<a href="#" class="parent-link">LINK 2</a>
...

$(function() { // at document ready, loop through target links, set CSS bg position
	var vertPos = 0;
	$('a.parent-link').each(function(){
		$(this).css('background-position', '0px ' + vertPos + 'px');
		vertPos -= 20;
	});
});

Open in new window

0
All Courses

From novice to tech pro — start learning today.