Css Background-Image - What Is the Correct Usage

CSS background-image - What is the correct usage?

The path can either be full or relative (of course if the image is from another domain it must be full).

You don't need to use quotes in the URI; the syntax can either be:

background-image: url(image.jpg);

Or

background-image: url("image.jpg");

However, from W3:

Some characters appearing in an unquoted URI, such as parentheses, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '\(', '\)'.

So in instances such as these it is either necessary to use quotes or double quotes, or escape the characters.

When to use IMG vs. CSS background-image?

Proper uses of IMG

1. Use IMG if you intend to have
   people print your page and you want the image to be included by default.
   —JayTee
2. Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.

Pragmatic uses of IMG

1. Use IMG plus alt attribute if the image
   is part of the content such as a logo or diagram or person (real person, not stock photo people).
   —sanchothefat
2. Use IMG if you rely on browser scaling to render an image in proportion to text size.
3. Use IMG
   for multiple overlay images in IE6.
4. Use IMG with a z-index in order
   to stretch a background image to fill its entire window.
   Note, this is no longer true with CSS3 background-size; see #6 below.
5. Using img instead of background-image can dramatically improve performance of animations over a background.

When to use CSS background-image

1. Use CSS background images if the
   image is not part of the content.
   —sanchothefat
2. Use CSS background images when
   doing image-replacement of text eg. paragraphs/headers.
   —sanchothefat
3. Use background-image if you intend to have
   people print your page and you do not want the image to be included by default.
   —JayTee
4. Use background-image if you need to improve download times, as
   with CSS sprites.
5. Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.
6. Use background-image with background-size:cover in order to stretch a background image to fill its entire window.

HTML CSS best way to use background image

You could use linear-gradient with color stops to create bands like that. The syntax is simple (explained in inline code comments below):

background-image: linear-gradient(to right, /* gradient from left to right */
    #f00, #f00 25%,         /* start with red, end with red at 25% */
    #00f 25%, #00f 50%,     /* blue at 25% continue up to 50% */
    #0f0 50%, #0f0 75%,     /* green at 50% continue up to 75% */
    #000 75%, #000 100%     /* black at 75% continue up to 100% */
);

To keep it simple, in the example below there are two divs for the bands and a middle div for the content. You can then take it to next level by using ::before and ::after pseudo-elements on the content and eliminate separate divs for the bands.

Example Fiddle: http://jsfiddle.net/abhitalks/nve9v0mn/1/

Example Snippet:

div.line {    height: 6px;    background-image: linear-gradient(to right,         #f00, #f00 25%,         #00f 25%, #00f 50%,         #0f0 50%, #0f0 75%,         #000 75%, #000 100%     );}div.content {    min-height: 60vh;    background-color: #eee;}

<div class="line"></div><div class="content"></div><div class="line"></div>