Why is the background image placed on the li and not the ul element?

HTML & CSS
1

Buongiorno from Wetherby UK

on this tutorial http://css.maxdesign.com.au/listutorial/04.htm the background image is added to the li elements as in:

li
{
background-image: url(arrow.gif);
}

But i would have incorrectly thought the back ground image would have been added to the ul so my question is please:

“Why is the background inage added to the li & not the ul element”

Grazie tanto,
David

2

It’s added to the list items because the idea is to create custom bullet points for the list… You COULD add it to the UL but it would be harder to get the spacing right to acheive the same effect.

3

Hi,

Edit:

Ignore my post below as I misread the question :frowning:

I thought you were talking about list-style images but it was background images which of course are not inherrited and must be applied to the list element as required. Background images are used instead of list-style-image because as mentioned above you have mnore control over where you place them.

It can be applied to either the ul or the li as list-style-image can be inherited. The list-style-image is applied to list elements and not a single ul as such but can be inherited if set on the ul. This allows you to set rules for the list elements via the ul and not have to create extra rules for the list element.

Strictly speaking the list-style-image only applies to elements with a default display of “list-item” (display:list-item) which would be a “li” element as the ul is display:block. However you can apply the image to the ul and although it doesn’t actually display anything the child list inherits the property/value and displays it.

4

Grazie Tanto :slight_smile: I’m from York too York as in North Yorkshire that is!

5