css  background  images  

Box  model  

Each box has a background layer that may be fully transparent (the default), or filled with a color and/or one or more images. The background properties specify what color (‘background-color’) and images (‘background-image’) to use, and how they are sized, positioned, tiled, etc. The background properties are not inherited, but the parent box's background will shine through by default because of the initial ‘transparent’ value on ‘background-color’.

Sets the background color to red.

{ background-color: #f00; }

sets the background color to red. superimposes the image over the background and tiles it (repeat) to fill the space.

{ background-color: #f00; background-image: url(flower.png); }

Sets the background color to red. Superimposes the image over the background and tiles it (repeat) to fill the space. Image is not repeated.

{ background-color: #f00; background-image: url(flower.png); background-repeat: no-repeat; }

Sets the background color to red. Superimposes the image over the background and tiles it (repeat) to fill the space. Image is not repeated. Single image is aligned center top in container.

{ background-color: #f00; background-image: url(flower.png); background-repeat: no-repeat; background-position:center top; }

How  did  they  do  it?  http://bradcolbow.com/

element { background-color: color || #hex || (rgb / % || 0-255); background-image:url(uri); background-repeat: repeat || repeat-x || repeat-y || no-repeat; background-position: x y || (top||bottom||center) (left||right||center); background-attachment: scroll || fixed;

{ background: red url(image.png) repeat top left scroll; }

sets multiple background images on one item

{ background: url(image_1.png) top left no-repeat, url(image_2.png) bottom left no-repeat, url(image_3.png) bottom right no-repeat; }

Check out quirksmode.org for compatibility issues. http://www.quirksmode.org/css/contents.html

CSS based background image which is clickable and which turns into a text link if CSS is not supported.

<a href=“#” id=“link” >some text</a>

#link { background: url(image_1.extention) top left no-repeat; display:inline-block; height:100px; width:200px text-indent:-9999px; }

links  Perfect Full Page Background Image http://css-tricks.com/perfect-full-page-background-image/