CODEWITHSUNDEEP
htmlcss
Jon
Jon

Reputation: 8531

Background Position Top Right With Specific Img Coords

I have a dropdown list where the parent node will have an icon to the left of the title. This icon is located in an icons image where there are a dozen other icons. The icon I am trying to use is located at pixel coordinates (0px, 100px) in this image.

I am wondering how would I position part of the image, which is located at (0px, 100px) on the top right corner of my ul.list > li element?

ul.list > li { background: url('images/icons.png') top right 0px 100px no-repeat; } //does not work

<ul class="list">
  <li>Title
    <ul>
      <li>Subs</li>
      </li>Subs</li>
    </ul>
  </li>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
</ul>

Upvotes: 0

Views: 110

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157334

Note: You edited your question, just remove top right

Give your li height and width and define top right like this

ul.list > li { background: url('images/icons.png') 0 100px no-repeat; }

Upvotes: 1

Related Questions