I would like to make a simple list of images. I can do it like this:

<ul id="list1">
    <li id="pic01"></li>
    <li id="pic02"></li>
    <li id="pic03"></li>

with css:

#list1 li {
background-repeat: no-repeat;
height: 250px;}


Or I could do it like this:

<ul id="list2">
    <li><img src="pic01.png" alt="pic01"></li>
    <li><img src="pic02.png" alt="pic02"></li>
    <li><img src="pic03.png" alt="pic03"></li>

with css:

#list2 li img {
height: 250px; }

What are the pros and cons of these two methods? They display the same in Chrome 8 and IE 9, as far as I can see. I have seen both methods used and I can't tell when one is more desirable. The second seems like a more common sense approach, while the first method allows me to put references to images in the css. As far as I can tell at this stage, this is a good thing because I would be separating content from presentation?


3 answers

This was chosen as the best answer

If the image is an information you should put it in the html and if is to formatting you can put in the css. Basically, if the image is a relavant information for the user, html is the right place!

Answered over 7 years ago by Fernando

Additionally, If your image has text on it, and you put it in the CSS you can write it like so:


<ul id="list1">
    <li id="pic01">Text goes here</li>
    <li id="pic02">More text goes here</li>
    <li id="pic03">Even more text here</li>


#list1 li { background-repeat: no-repeat; height: 250px; text-indent:-999em; }

#pic01{ background-image:url('pic01.png'); }
#pic02{ background-image:url('pic02.png'); }
#pic03{ background-image:url('pic03.png'); }

What the line "text-indent:-999em;" does, is toss the text that you typed in your LI's 999 empiricals off of the page. That way, you're still displaying text, but it looks the way you want it to in the image (If the stylesheet was not there, text would display). If you use this method for links make sure to set "outline:none;" on your image/link or there will be a dotted outline across your screen when you click on it.

Fernando is correct though, I was just giving an alternative. Informationally, putting images in the HTML is better because if someone has trouble loading your stylesheet the image will still show up. Usually, all the elements that make up the structure of your website should be in the CSS (buttons and nav links as well).

Answered over 7 years ago by Jared Tomeck

One of the main reasons you'd put images in a CSS is site theming and design change. It's easier to change CSS when you have to redesign an existing markup than changing HTMLs of various pages and you never know what the end result will be.

Answered over 7 years ago by Robert Koritnik