tags:

views:

27

answers:

1

Hi, i would like to add an image that acts like a border after every list in the sidebar. I knew it has something to do with this

#sidebar h2 {
border-bottom: 1px solid #d6d6d6;
}

since i tried that code and a border appeared. But what i wanted is a picture, i could do that with in the posts with:

.TitleBorder {
background: url(images/border.png) repeat-x;
height: 3px;
width: 615px;
}

and 
<div class="TitleBorder"></div>

but in sidebar, i can't do that. Any help?

+1  A: 

You can set that background directly for the h2 tag. Example :

h2 { 

background:url(images/border.png) 0px 0px;  

}

The first 0px is for x-axis and the second one is for y-axis.

Let say you want to move the background at the bottom of the h2 text, you can set it like this :

h2 { 

background:url(images/border.png) 0px 10px;  

}
Zhaf
I just wrote a post on background positioning. Might be helpful. Also, make sure the list item is displaying as a block lvl. http://inteldesigner.com/2010/code/background-image-positioning-explained
Thorn007