Backgrounds

  Pick a Section

Background Color

Background color (color always spelled the American way) can be set using the colors name, or its Hex code.

Browsers recognize an increasing number of color names, such as deeppink, purple, orange and red. You can find a full list of widely recognized color names [ on the w3schools website ]

Hex codes are a fully supported version of color names. Every shade of every color imaginable has a hex code. It's a 6 character code started with a # sign, for instance #ffffff is the hex code for white, and #000000 is black. You can find a pretty long list of hex codes on [ Webmonkey ].


To apply the background color to your whole page just use:

Applying a background to "table" or "div" will affect every table or div on the page, for example:

Alternatively you might want to affect just one table or div box, that has a predefined class:

You may have heard of "Websafe" colors...

In the bad old days, when the majority of computers struggled to show more than 256 colors, the websafe hexadecimal color chart was invented. It consisted of 216 colors that these systems could display cleanly. However, with the advent of modern technology, it's probably no longer necessary to take such precautions, since most computers can now display millions of colors.

Background Images

To make a background image show up on your page, you first need to upload it to the internet. Images saved on your computer will not work! If you're doing a profile or blog, there are a lot of ad supported hosts like [ Tinypic ] or [ Photobucket ] that will let you store your images online for free. These sites will give you a "link" or "url" to your image which starts with http:// and ends in some kind of image extension like gif, jpg or png. When you paste the image url into the code below, you must use the whole thing including the http:// bit.
If you're doing a full site, then you can upload your images to the same directory as your pages and use relative paths if you like, ie, myimage.gif, instead of http://www.mysite.com/myimage.gif.


To put a background image on your page itself:

You can also put a background image on a specific table or div box, defined by it's class, eg:

Color & Images Together

Sometimes you're going to want both a background image and a background color on the same part of your page, for instance, if your image isn't repeated and it only takes up a small part of the page, or if your background image provides the dark background necessary to make light text show up properly, but you're worried it might not load and people will struggle to read your page.


Some people use separate background-image and background-color styles, like this:

There's nothing wrong with that, it does exactly the same thing as the code below and some people find it simpler, but I prefer the lazy all in one method:

Which is just simply to write the color before the image path.

Background Repeat, Position etc.

CSS provides ways to define exactly how you want your background images to behave.


Background-Repeat

Background-repeat defines whether the image repeats. It can be either "repeat" (default), "no-repeat", "repeat-x" (repeats horizontally only), or "repeat-y" (repeats vertically only). For example, this code would make an image of your choice repeat vertically all the way down your page:

Background-position is where on the page you want your background to appear. It is usually 2 parameters one after the other- vertical position followed by horizontal position, for instance "top left" or "bottom center". Vertical position can be top, center or bottom, and horizontal position is left, center or right. Nb, top left is default. This example code will place a background image in the bottom right corner of the page:

Background-attachment simply defines whether the image stays in the same position on the page, or moves down as the user scrolls down the page. It has 2 possible values, "fixed" or "scroll" (fixed being the still background). On this example the background image will not scroll with the text:

Nb, background-attachment only works on the page body, and the default value is scroll.

Multiple Background Images

One of the most common questions I get asked, is if you can have more than one background image on your page, for instance if you want one image in the top left corner, and another separate one in the bottom right. If you're familiar with HTML you'll realize that it's not a good idea to do this by making both images into one big image, as it will only work at one screen resolution, and will take ages to load anyway, but if you're familiar with CSS you'll know that you can't set more than one background on the same thing. So how do you do it then?

Well you could absolutely position it, but unless you have a pretty good idea what you're doing, absolute positioning can be err.. a bit dodgy, at best. Alternatively then, you could just add a transparent div or table over 100% of your page, and put all your page content in that. You then stick one background on the div box, and one on the page body itself, and your visitors are none the wiser:

Nb, If you use this method be careful to set background position for at least one of your images, so they don't end up on top of each other, and don't give the div box a background color or the background image on the page body will be hidden by it! If you want a background color as well, only apply it to page body.