Working With Webpage Backgrounds in CSS - Part 2

By: Daniel Imbellino
Updated: Feb 28, 2013

CSS Background Position:

In CSS you can specify the position of a background image or element with the "background-position" property.
Ex: body {background-image: url("sample-image.png"); background-position: 18% 25%; }
When specifying a position with percentages or pixels, you are measuring from the top left corner of the screen diagonally to the bottom right corner. Given our example, the background position of our "sample-image.png" would be located 18% from the left (horizontally) and 25% from the top (vertically) of the screen.

We could use values given in pixels like this:
#image {body background-image: url("sample-image.png"); background-position: 40px 120px; }

You can also use the descriptive values such as:
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Although this doesnt really define an exact location on the screen as does using pixel or percentage values. Its probably best to stick with using exact values instead of approximate values.

CSS background color:
You can set background color values using color names (such as background-color: magenta;), RGB (Red, Green, and Blue color values that are written like this background-color: rgb(255,10,35); Values are given between 0 (being no color at all) and 255 (full color).) or you can use hex values (#ff0000). Its best to use simple color names or RGB color values since they can be tailored to a color strength without having to memorize a color values hex equivalent. Also, not all color names are valid across all browsers, making RGB values even more enticing.
Ex: body {background-color: rgb(40,150,10); }
In our example we specified a background color value that is 40 parts red, 150 parts green, and 10 parts blue. Just remember you can use values from 0 to 255, and 0 is no color, while 255 is full color.

Another example:
body {background-color: yellow; }

If you would like to learn more about the positioning properties of CSS, be sure to check our comprehensive guide to: Positioning Elements in CSS