Center align background images between list items

Question

I'm building a responsive website which has a standard navigation. Each <li> element has a background image, like so:

CSS

.container {
    width: 960px;
    max-width: 90%;
    margin: 0 auto;
}
ul {
    width: 100%;
}
li {
    float: left;
    width: 16%;
    list-style: none;
    text-align: left;
    background: url(http://bit.ly/1D60g6m) no-repeat 68% 0;
    background-size: 10%;
}

HTML

<div class="container">
    <nav>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
            <li>Six</li>
        </ul>
    </nav>
</div>

My background-position roughly aligns the background image to the middle of each <li>.

As you reduce the viewport width, the image is no longer aligned to the middle. This is more noticeable when I use different background images for each <li>.

Is there a better way I can align the background image to the whitespace between each <li>?

score 1 · Answer 1 · answered Mar 11 '15 at 17:23

Try changing the background-size from 10% to contain

.container {
    width: 960px;
    max-width: 90%;
    margin: 0 auto;
}
ul {
    width: 100%;
}
li {
    float: left;
    width: 16%;
    list-style: none;
    text-align: left;
    background: url(http://bit.ly/1D60g6m) no-repeat 68% 0;
    background-size: contain;
}

<div class="container">
    <nav>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
            <li>Six</li>
        </ul>
    </nav>
</div>

JSFiddle

Thanks buddy. I'm not using `background-size` in the real version. This is to simply reduce the size of the arrow image that I grabbed from Google. — Sam, Mar 11 '15 at 17:35

score 1 · Answer 2 · answered Mar 11 '15 at 17:24

1

Moving the image to the right and centering the list text would seem to be the most likely option.

.container {
  max-width: 960px;
  width: 90%;
  margin: 0 auto;
}
ul {
  width: 100%;
}
li {
  float: left;
  width: 16%;
  list-style: none;
  text-align: center;
  background: url(http://bit.ly/1D60g6m) no-repeat 0;
  background-size: 10%;
  background-position: right center;
}

<div class="container">
  <nav>
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ul>
  </nav>
</div>

answered Mar 11 '15 at 17:24

Paulie_D

107,962
13
142
161

It's important that the text is aligned to the left, so this isn't really an option for me. Good suggestion though :) – Sam Mar 11 '15 at 17:36
Good answer ! I think it is the best solution – vals Mar 11 '15 at 18:44

score 1 · Answer 3 · answered Mar 11 '15 at 17:27

You can do something like this:

https://jsfiddle.net/j0c1w162/7/

<div class="container">
    <nav>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
            <li>Six</li>
        </ul>
    </nav>
</div>

.container {
    width: 960px;
    max-width: 90%;
    margin: 0 auto;
}
ul {
    width: 100%;
    padding:0;
    margin: 0;
}
li {
    float: left;
    width: 16%;
    list-style: none;
    text-align: center;
    position: relative;

}
li:after{
    background: url(http://bit.ly/1D60g6m) no-repeat 68% 0;
    background-size: 20%;
    content: '';
    width: 50px;
    height: 16px;
    position: absolute;
    right: -18px;
    top: 2px;
}

It's important that the text is aligned to the left, so this isn't really an option for me. Good suggestion though :) — Sam, Mar 11 '15 at 17:39

score 0 · Accepted Answer · edited May 23 '17 at 10:24

After some reading from this answer, I've come up with an alternative solution.

HTML

<div class="container">
    <nav>
        <ul>
            <li><a href="#">One</a><div></div></li>
            <li><a href="#">Two</a><div></div></li>
            <li><a href="#">Three</a><div></div></li>
            <li><a href="#">Four</a><div></div></li>
            <li><a href="#">Five</a><div></div></li>
            <li><a href="#">Six</a><div></div></li>
        </ul>
    </nav>
</div>

CSS

.container {
    width: 960px;
    max-width: 90%;
    margin: 0 auto;
}
ul {
    width: 100%;
}
li {
    float: left;
    width: 16%;
    list-style: none;
    text-align: left;
}
li a {
    float: left;
    display: block;
}
li div {
    min-height: 20px;
    background: url(http://bit.ly/1wxK23y) no-repeat center;
    overflow: hidden;
}

This method means you don't need to use text-align: center;. Positioning the image to the right and aligning the list text to the center is a good solution, but it becomes a problem if your navigation needs to align with the body content.

I'll leave this answer unsolved for 24 hours to see what you think.

Thanks for all of your help.

Center align background images between list items

4 Answers4