htmlcssbulletedlist

Use High Resolution Bullet Point Image for UL

I need to use a 100 px wide bullet image for a ul, but then scale it down to 8px and have it behave like the normal ul bullet list.

ul.bg-img li {
    background-image: url(http://placehold.it/100x100);
    background-size: 8px 8px;
 ...
}

The problem is that the bullet does not line up with the first row of content. If I put a heading tag and a paragraph inside the li, then the bullet displays in the middle of the li element or below it.

If I add a margin and padding to move it around, it does not work for variable line heights and amounts of content.

/* breaks when going to second line */
margin: 1.00em 0 0 -30px;
padding: 0 0 0 20px;

It should behave like the default bullets: aligned to top content.

http://jsfiddle.net/TheFiddler/nqvfj004/

NOTE: I need to use a 100px high resolution bullet because this is for a webapp that exports the web preview to print.

Solution

  • Set background-position from top, shift position on large font elements

    First, set your background-position to some value from the top, not the center. I prefer to use calc(1em - 4px) because this puts the 8px tall image in the vertical middle of a standard 1em font line. You can use top or another basic unit as a fallback for older browsers.

    ul.bg-img li {
    ...
    background-position: left top;
    background-position: left calc(0.5em - 4px);
    ...
}

    Next, you should adjust for elements whose font-size is larger than 1em. You can do this at least two ways:

    1. Adjust for larger font-size elements that may appear on the first line by shifting their position up and applying a corresponding negative bottom margin.

      ul.bg-img li h1:first-child {
    position: relative;
    top: -0.25em;
    margin-bottom: -0.25em;
}


    h1, h2, h3 {
  margin: 0;
  padding: 0;
  line-height: 1;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.75em;
}
h3 {
  font-size: 1.5em; 
}
ul.bg-img {
    list-style: none;
    margin: 0 0 0 0;
}
ul.bg-img li {
    background-image: url(http://placehold.it/100x100);
    background-size: 8px 8px;
    background-repeat: no-repeat;
    background-position: left top;
    background-position: left calc(0.5em - 4px);
    margin: 1em 0 0 -30px;
    padding: 0 0 0 20px;
}
ul.bg-img li h1:first-child {
    position: relative;
    top: -0.25em;
    margin-bottom: -0.25em;
}
ul.bg-img li h2:first-child {
    position: relative;
    top: -0.1875em;
    margin-bottom: -0.1875em;
}
ul.bg-img li h3:first-child {
    position: relative;
    top: -0.125em;
    margin-bottom: -0.125em;
}
    <h3>Background Image on li</h3>

<ul class="bg-img">
    <li>
        <h1>Bullet lines up with H1</h1>
    </li>
    <li>
        <h2>Bullet lines up with H2</h2>
        <p>Paragraph on second line</p>
    </li>
    <li>
        <h3>Bullet lines up with H3</h3>
        <span>Span on second line</span>
    </li>
    <li>
        <p>Paragraph on first line</p>
        <h3>H3 on second line</h3>
    </li>
    <li>
        <span>Span on first line</span>
        <h3>H3 on second line</h3>
    </li>
    <li>
        <p>Paragraph alone</p>
    </li>
    <li>
        <span>Span alone</span>
    </li>
</ul>

    1. Apply a fixed line-height to all direct children of list-items. Use rem here instead of em.

      ul.bg-img li>* {
    line-height: 1.25rem;
}


    h1, h2, h3 {
  margin: 0;
  padding: 0;
  line-height: 1;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.75em;
}
h3 {
  font-size: 1.5em; 
}
ul.bg-img {
    list-style: none;
    margin: 0 0 0 0;
}
ul.bg-img li {
    background-image: url(http://placehold.it/100x100);
    background-size: 8px 8px;
    background-repeat: no-repeat;
    background-position: left top;
    background-position: left calc(0.5rem - 4px);
    margin: 1em 0 0 -30px;
    padding: 0 0 0 20px;
}
ul.bg-img li>* {
    line-height: 1.25rem;
}
    <h3>Background Image on li</h3>

<ul class="bg-img">
    <li>
        <h1>Bullet lines up with H1</h1>
    </li>
    <li>
        <h2>Bullet lines up with H2</h2>
        <p>Paragraph on second line</p>
    </li>
    <li>
        <h3>Bullet lines up with H3</h3>
        <span>Span on second line</span>
    </li>
    <li>
        <p>Paragraph on first line</p>
        <h3>H3 on second line</h3>
    </li>
    <li>
        <span>Span on first line</span>
        <h3>H3 on second line</h3>
    </li>
    <li>
        <p>Paragraph alone</p>
    </li>
    <li>
        <span>Span alone</span>
    </li>
</ul>