//CSS: Background images

<New code>

CSS font-family: - which typeface to use
CSS font-style: - which style: normal, or italic
CSS font-weight: - how heavy: normal, or bold
CSS font-size: - typeface size

CSS color: - indicates the text color
CSS background-color: - indicates the background color

CSS border: - indicates the color, thickness and style of a border

CSS width: - how wide an html element is

The quick version:

body{
    background: 
        url("http://link.to/your/wallpaper/jpg") 
        no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

This code was researched by Citadel student Kunal Kumar.

Background images are frustrating

The main things is that it is hard to get the image to cover the whole of the background of the page. The usual tricks of width and height don't apply.

The code above:

  1. links to an image
  2. says don't repeat or tile it
  3. centre it vertically and horizontally
  4. keep it fixed in the centre of the page while you scroll
  5. and stretch it out so that it covers the back of the window

You will notice that the background-size: cover part is repeated several times in slightly different ways.

That is because not all browsers use exactly the same commands to do things. The code above works on Safari, Firefox, Opera, and generic browsers.

It is an ugly way to code, but it works.