Question

I decided to play with some CSS3 and ran into some problems with background images. My background images (the hexagon and arrow) aren’t displaying correctly. The hexagon is not showing in the parent element and I can’t get the arrow to move to the right.

I’m using border-images so that I can horizontally resize the elements.

Any Advice?

This is what it’s supposed to look like ->

This is the hexagon ->

This is the Arrow ->

This is the Anchor Element Background ->

This is the List Item Element Background ->

JS Fiddle

HTML

<nav>
    <ul>
        <li>
            <a href="">Examples</a>
        </li>
    </ul>
</nav>

CSS

nav {
    font-family: sans-serif;
    font-weight: 700;
    font-size: 24px
}
li {
    display: inline-block;
    height: 107px;
    border-width: 1px 32px 1px 32px;
    -moz-border-image: url('http://markschamel.com/graphics/themes/misc/nav.li.background.png') 1 32 1 32 stretch stretch;
    -webkit-border-image: url('http://markschamel.com/graphics/themes/misc/nav.li.background.png') 1 32 1 32 stretch stretch;
    -o-border-image: url('http://markschamel.com/graphics/themes/misc/nav.li.background.png') 1 32 1 32 stretch stretch;
    border-image: url('http://markschamel.com/graphics/themes/misc/nav.li.background.png') 1 32 1 32 stretch stretch;
}
a {
    display: inline-block;
    height: 45px;
    border-width: 1px 14px 1px 14px;
    -moz-border-image: url('http://markschamel.com/graphics/themes/misc/nav.a.background.png') 1 14 1 14 stretch stretch;
    -webkit-border-image: url('http://markschamel.com/graphics/themes/misc/nav.a.background.png') 1 14 1 14 stretch stretch;
    -o-border-image: url('http://markschamel.com/graphics/themes/misc/nav.a.background.png') 1 14 1 14 stretch stretch;
    border-image: url('http://markschamel.com/graphics/themes/misc/nav.a.background.png') 1 14 1 14 stretch stretch;
    text-decoration: none;
    line-height: 45px;
    padding: 0 10px;
    margin: 31px 0 0 17px;
    background: url('http://markschamel.com/graphics/themes/misc/nav.hex.background.png') no-repeat -50px center,
    url('http://markschamel.com/graphics/themes/misc/nav.arrow.background.png') no-repeat right center;
    color: #d92701;
}

Answer 1

JS Fiddle

After reading the A List Apart article on sliding doors, I worked on a solution to this problem. I used Abhidev’s suggestion to divide the image into three parts.

This solution also allows me to shrink the width of each list item (e.g. providing a value other than auto to the anchor element).

CSS

nav {
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 700;
}
nav ul {
    height: 107px;
}
nav li {
    display: inline-block;
    height: 107px;
    position: relative;
}
nav a {
    display: inline-block;
    color: #d92701;
    text-decoration: none;
    line-height: 4.5;
    overflow: hidden;
    height: 107px; width: auto;
    background: transparent url('nav.background.expand.middle.png') repeat-x left top;
    position: relative;
    top: 0;
    white-space:nowrap;
}
nav li:before {
    content: "";
    float: left;
    width: 64px;
    height: 107px;
    margin: 0;
    background: transparent url('nav.background.expand.begin.png') no-repeat left top;
}
nav li:after {
    content: "";
    float: right;
    width: 58px;
    height: 107px;
    margin: 0;
    background: transparent url('nav.background.expand.end.png') no-repeat right top;
}

HTML

<nav><ul><li><a href="">Hello World</a></li><li><a href="">Hello</a></li><li><a href="">Hello World Hello World</a></li></ul></nav>