# Was this use of <img> tags in this HTML over background images better?

I saw this UI for a mobile app, but I reverse engineered it for the web. This is how it looks in my CodePen

This would be either a favorites or featured list locations to travel to. I decided to go with a <ul> with class of "locations"

HTML

<ul class="locations">
<li>
<a href="#"> <!-- url would be generated-->
<img src="http://shared-assets.s3.amazonaws.com/codepen/img/new-york-320x140.jpg">
<span>New York</span>
</a>
</li>
<li>
<a href="#"> <!-- url would be generated-->
<img src="http://shared-assets.s3.amazonaws.com/codepen/img/san-francisco-320x140.jpg">
<span>San Francisco</span>
</a>
</li>
<li>
<a href="#"> <!-- url would be generated-->
<img src="http://shared-assets.s3.amazonaws.com/codepen/img/paris-320x140.jpg">
<span>Paris</span>
</a>
</li>
<li>
<a href="#"> <!-- url would be generated-->
<img src="http://shared-assets.s3.amazonaws.com/codepen/img/london-320x140.jpg">
<span>London</span>
</a>
</li>
</ul>


In Production, I will be building this with Meteor which uses MustacheJS templates. So this is likely how I will structure the list.

MustacheJS template (proposed)

<template name="featuredLocations">
<ul class="locations">
<li>
<img src="{{{locationImage}}}">
<span>{{city}}</span>
</a>
</li>
</ul>
</template>


CSS

.locations {
list-style-type: none;
margin: 0;
}
.locations > li {
border-bottom: 1px #dd4977 solid;
height: 136px;
width: 100%;
position: relative;
overflow:hidden;
}
.locations li a {
background-color: #777;
display: block;
height: 100%;
postion: relative;
text-decoration: none;
z-index: 1;
}

.locations > li > img {
width: 100%;
height: 135px;
position: absolute; top:0; left: 0; right: 0;
z-index: 10;
}

.locations > li > a > span {
background-color: #dd4977;
color: #fff;
font-size: 21px;
letter-spacing: 1px;
position: absolute; bottom: 0; left: 6px;
z-index: 20;
}


The actual images in production will be bigger and will scale down according to the device. There will be media queries that are not shown here.

-

The use of ul seems appropriate. My concern with using <img>s would be with the image dimensions. From what I can see above, unless you create your images specifically in those dimensions, it will become a pain to ensure they scale correctly.

I've found that if you want to preserve a predetermined width and height for your images without ruining the aspect ratio it's almost always easier to use background-image rather than <img> tags.

Using background-size: cover you can ensure that the image covers the available space, without losing the ratio:

The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container

-
right, well the idea was that images that are selected would be cropped down to a certain dimension to ensure that they look good at various scales. – JGallardo Feb 3 '14 at 17:26
I think that cover will serve you better and be much simpler to implement :) – Jivings Feb 3 '14 at 17:29
background-size: cover is specially helpful when you want to scale the image, but don't know what will be the dominant dimension. That is, if you need to scale to fit the width, or the height. – vals Feb 3 '14 at 18:57

With my customers, I often run into the trouble that background images are not printed by default on most browsers (but it can be enabled in the print options).

This is an other option to let the images scale to the available space:

img{
max-width:100% !important;
height: auto;
display: block;
}

-