Hey all:

I have a background-image of one of those typical paint splats for an unordered list.

Is there a way to have it so that the background-image is not limited in size by its element?

I'd like the background-image to overflow past the border of the unordered list.

  margin-left: auto;
  margin-right: auto;
  background-image: url("Images/creditSplat.png");
  background-position: center;

I had it using and img and z-index with both the list and image to accomplish this, but I wanted to see if there was a more elegant way to do this (I assume CSS3).

Thanks in advance!

1 answer

Doug 1095

None that I know of. What would you expect to happen if the list items (LI) were closer together than the size of the background image? Do you want the images to overlap each other?

Answered over 8 years ago by Doug
  • I'm not sure I understand your question correctly. The background-image is for the ul not the li and their (li) position doesn't change when the page is resized. Jim Holby over 8 years ago
  • My mistake; I was thinking the background image was on the LI element. The better answer is: Give the UL a min-height (and min-width?) to fully display the bg image. If you are wanting the image to 'bleed' into neighboring elements, then you will have to apply the bg-image to a parent of the UL and the neighboring elements, possibly requiring background-image-position to get it in the right place. Doug over 8 years ago
  • I agree with Doug. The background *should* never bleed into other elements. Either make the ul bigger or put the background in the parent element. +1 Abinadi Ayerdis over 8 years ago