CODEWITHSUNDEEP
cssliststyling
Kessi
Kessi

Reputation: 79

css image background positioning

I'm struggling with a css challenge. I have a list with a arrow bullet. I want the arrow bullet align at the first line. This arrow bullet is set via the background-image like this:

.linklist a { 
  display: block; 
  padding: 0 0 0 8px; 
  background: transparent url("../images/css/arrow-left.png") no-repeat 0; 
  text-decoration: none; 
  outline: none; }

Result is:

enter image description here

When I remove display: block it shows arrow bullet on the first line, like I want. But now, the second line is indented. I want vertical alignment between the two lines and the arrow bullet aligned at the first line. Is there something i'm overlooking how to style this?

enter image description here

Hope anybody can help me?

Kind regards.

Upvotes: 2

Views: 231

Answers (3)

karacas
karacas

Reputation: 2132

You need use background-position :

.linklist a { 
  display: block; 
  padding: 0 0 0 8px; 
  background: transparent url("../images/css/arrow-left.png") no-repeat 0; 
  text-decoration: none; 
  outline: none;
  /*new*/
  background-position: 15px 20px
 }

Upvotes: 0

boz
boz

Reputation: 4908

Try something like:

background: transparent url("../images/css/arrow-left.png") 0 -4px no-repeat;

With 0 being the left background position and -4px being the top one.

Upvotes: 0

ATOzTOA
ATOzTOA

Reputation: 35950

CSS

background-position: left top;

Upvotes: 5

Related Questions