Question

I’m creating a mobile friendly responsive version of a flash website. The problem I’m facing is that each background image on the top menu has a different width, so I’m not being able to set them side by side properly and have a uniform size at the same time, they are getting scaled to fit the container.

This is a list style menu using background images and a hover effect. I’m using background-size:contain.

This is my CSS, which repeats for all items:

ul.menu {
   list-style:none;
   position:relative;
   z-index:1;
   right:24px;
   top:-100px;
   margin-bottom:-32px;
   display:inline-block;
   text-align:right;
   height:30px;
   width:100%;
   float:right;
}

ul.menu li {
   display:inline-block;
   list-style-image:none !important;
   text-align:right;
   width:15%;
   height:100%;
   float:right;
}

li.roca a {
   background: url(../images/roca1.jpg) no-repeat 0 0;
   position:relative;
   display:block;
   height:100%;
   -moz-background-size:contain; 
   -webkit-background-size:contain; 
   background-size:contain;
}

li.roca a:hover {
   background: url(../images/roca2.jpg) no-repeat 0 0;
   -moz-background-size:contain; 
   -webkit-background-size:contain; 
   background-size:contain;
}

And this is my HTML:

<ul class="menu">
    <li class="roca"><a href="http:..." target="_blank"></a></li>
    <li class="img2"><a href="http:..." target="_blank"></a></li>
    <li class="img3"><a href="http:..." target="_blank"></a></li>
    <li class="img4"><a href="http:..." target="_blank"></a></li>
    <li class="img5"><a href="http:..." target="_blank"></a></li>
</ul>

Does anyone has an idea what code could fix this?

Thanks a lot in advance!!

Answer 1

• Do not use background images for things that are actually content…in this case the text itself would be better off using a web font and the background image would just be the texture. If you need an image for some reason you should be using an img tag with the proper alt text. If for some reason you really want to fight this you should at least have content in the tags for accessibility.

• Separating the text out from the background image (which is highly recommended and there’s little reason to not do it with the power of CSS3 font support) would then solve all of the layout issues and if you need a more controlled dynamically sized background image you should use a “sliding door” approach.