CODEWITHSUNDEEP
css
Rifki
Rifki

Reputation: 901

Css background image for li

I have the following

.toggle_container .block ul { margin: 0 0 7px 0; }

.toggle_container .block li { list-style-type:none;
color: #232120; font-size: 1.2em; line-height:1.2em; padding: 4px 0px 2px 23px;

background:  url(images/red-bullet.gif)no-repeat; 
background-position: 3% 45%;

}

The trouble is the image moves downwards if I have more than one line of text in the

  • tag

    Thanks<

    Upvotes: 0

    Views: 134

    • Answers (2)

    Rifki
    Rifki

    Reputation: 901

    Well Isnt that typical. Done a bit more searching and found the answer, so thought I would answer my own question.

    I mixed position percentages and pixels as follows: background-position: 3% 9px;

    Upvotes: 0

    betamax
    betamax

    Reputation: 14061

    Where you have:

    background-position: 3% 45%;

    Try using px values instead of percentages. So change the 3% and 45% to the offset of the image you want, something like 3px 45px.

    You could also replace 3% and 45% with 'top left' to fix the position to the top left..

    Upvotes: 1

    Related Questions