StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h3>Proper uses of IMG</h3> <ol> <li>Use <code>IMG</code> if you intend to have people <a href="https://stackoverflow.com/questions/492809/when-to-use-img-instead-of-css-background-image/492835#492835">print your page</a> and you want the image to be included by default. —<a href="https://stackoverflow.com/users/20153/jaytee">JayTee</a></li> <li>Use <code>IMG</code> (with <code>alt</code> text) when the image has an important semantic meaning, such as <a href="http://24ways.org/2005/naughty-or-nice-css-background-images" rel="noreferrer">a warning icon</a>. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.</li> </ol> <h3>Pragmatic uses of IMG</h3> <ol> <li>Use <code>IMG</code> plus alt attribute if the image is <a href="http://stackoverflow.com/questions/492809/when-to-use-img-instead-of-css-background-image/492834#492834">part of the content</a> such as a logo or diagram or person (real person, not stock photo people). —<a href="http://stackoverflow.com/users/42147/sanchothefat">sanchothefat</a></li> <li>Use <code>IMG</code> if you rely on browser scaling to render an image in proportion to text size.</li> <li>Use <code>IMG</code> for <a href="http://blog.neatlysliced.com/2007/07/ie6-hides-css-images/" rel="noreferrer">multiple overlay images in IE6</a>.</li> <li><strike>Use <code>IMG</code> with a <code>z-index</code> in order to <a href="http://www.quackit.com/html/codes/html_stretch_background_image.cfm" rel="noreferrer">stretch a background image</a> to fill its entire window.</strike><br>Note, this is no longer true with CSS3 background-size; see #6 below.</li> <li>Using <code>img</code> instead of <code>background-image</code> can dramatically improve performance of animations over a background.</li> </ol> <h3>When to use CSS background-image</h3> <ol> <li>Use CSS background images if the image <a href="https://stackoverflow.com/questions/492809/when-to-use-img-instead-of-css-background-image/492834#492834">is not part of the content</a>. —<a href="https://stackoverflow.com/users/42147/sanchothefat">sanchothefat</a></li> <li>Use CSS background images when doing <a href="https://stackoverflow.com/questions/492809/when-to-use-img-instead-of-css-background-image/492834#492834">image-replacement of text</a> eg. paragraphs/headers. —<a href="https://stackoverflow.com/users/42147/sanchothefat">sanchothefat</a></li> <li>Use <code>background-image</code> if you intend to have people <a href="https://stackoverflow.com/questions/492809/when-to-use-img-instead-of-css-background-image/492835#492835">print your page</a> and you do not want the image to be included by default. —<a href="https://stackoverflow.com/users/20153/jaytee">JayTee</a></li> <li>Use <code>background-image</code> if you need to improve download times, as with <a href="http://css-tricks.com/css-sprites/" rel="noreferrer">CSS sprites</a>.</li> <li>Use <code>background-image</code> if you need for only a portion of the image to be visible, as with CSS sprites.</li> <li>Use <code>background-image</code> with <code>background-size:cover</code> in order to stretch a background image to fill its entire window.</li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload