CSS: Changing Background Properties

body {background-image: url(picture.png);}

This will cause your browser to look for a file (in the same folder as your HTML document) named picture.png. This is a form of relative linking. Another example would be to add a sub folder before the actual picture: url(/images/picture.png) You can also use absolute linking to set an image:

body {background-image: url(http://www.newbtopro.com/images/picture.png);}

Regardless of what way you link to your picture, your image will show at the top left of the screen.

Repeating An Image

The problem with the above example is that it may not cover the screen completely. If your web site is best viewed with a screen resolution of 1024x768, what if your image was only 600x600? Your 600x600 image would start at the top left and move 600 pixels down and right. This still leaves a portion of your background not covered (defaulting to the color white).

One method of solving this is to create a small image and make them repeat across the screen. Let's say we want to create an image that is dark blue at the top and fades to a light blue at the bottom. This is called a gradient image. As we move further down the image the color gets lighter and lighter. This gives the appearance of depth. Should we then go ahead and create a 1024x768 image that does this? Nope! All we need to do is create an image that is 1x768.

We can have CSS repeat the image across the screen.

body {background-image: url(background.png); background-repeat: repeat-x;} 

Using the 'background-repeat' property, we can tell CSS to repeat the same image over and over again. Doing this will make your 1 pixel wide image repeat across the entire screen.

There are a few values you can use with the background-repeat property:

• repeat – Repeats an image both horizontally and vertically.
• Repeat-x – Repeats an image only horizontally (x axis)
• repeat-y – Repeats an image only vertically (y axis)
• no-repeat – Forces the image to not repeat

Background Image Positioning

What if you wanted to define the exact position of your image? Say we wanted to position a 600x600 image in the middle of the screen and have the rest of the screen a solid color?

In order to achieve this, we need to learn about positioning. There are three methods of positioning background images: pixel values, percentages and generic keywords.

Let's see the examples:

p {background image: url(picture.png); background-position: 50px 30px;}
p {background image: url(picture.png); background-position: 50% 20%;}
p {background image: url(picture.png); background-position: top center;} 

The first example will move the image 50 pixels to the right and 30 pixels down. The second will move the image 50% of the screen size to the right and 20% of the screen size down. The last example will give a “fuzzy” approximation, saying the image should be located at the top center of the screen.

Some other keywords you can use are: top, bottom, right, left and center. You can also combine some of them to better place your images (i.e top center, right bottom).