I want to make the background image of a bullet point visible even though it appears outside its containing element.

If you go to my site you'll see that I have the bullet where I want it to be but half of it is cut off because it's sitting outside its list element.

Is there any way to make the rest of the bullet visible?

The image below shows what I'm trying to achieve:

alt text


3 answers

This was chosen as the best answer

Unfortunately you can't view a background image outside of it's containing div, so you have to use a bit of trickery. I personally would fix it in one of two ways.

1) Create a separate div that contains the bullet background, and absolutely position it so that it overlaps the left edge of the pink box.

2) Use a background image instead of a background colour, and add a thin band of grey down the left edge, so it appears to be overlapping, e.g.

ul#nav li.active {background:url('background.gif') repeat-y 0 0;}


NB. With the background image solution you'll need to move the bullet background image from the <li> to the <a> as the active background overwrites the bullet background. (Or you can combine two backgrounds in the same element using CSS3, but this is unsupported on older browsers.)

Answered over 8 years ago by John Catterfeld
olivaw 0

Thanks for your response John. I used your background.gif and that's done the trick.

Out of interest (and if you have time to respond) how did you create that gif?

Answered over 8 years ago by olivaw

For the background simply create an image (in Photoshop, or whichever software you prefer) that is as wide as necessary (depending on the width of the widest <li>) and one pixel high (as you will repeat it vertically).

Fill it with the background colour of the list item and using the paint brush simply zoom in and fill in the first five or so pixels on the left with the page background colour.

Answered over 8 years ago by John Catterfeld