[CSS] BG Image [TUT]

Subject: [CSS] BG Image [TUT] Thu Mar 19, 2009 7:45 pm

In the last tutorial i showed you have to do text and background colors.

In this one i will teach you how to put in a background picture and do some cool things to it.

First we are going to get outselfs a picture. You can either make one yourself in Photoshop or Paint or wherever you like, or we can download one, but be careful of copyrights.
Make a new folder in you website directory and call it Pictures. Save your picture there and call it picture.gif if its a drawing or picture.jpeg if its a more detailed picture, cause GIF contains less colors than JPEG it loads faster on your page.

Go to your CSS document and write in the <body> section:

body {
background-color: #FF0000;
background-image: url("pictures/Picture.gif");
}

h1 {
color: #CC9900;
background: #00000;
}

Where "pictures" is the folder you created and "picture.gif" is the image.
If you didn't make a new folder just remove the "pictures/" so it will look like this:

background-image: url("Picture.gif");

I used GIF as an example you can change that yourself.

Now we are using your desired picture as a background on our page, GRATZ .
Lets go correct some of the things we like, for example we can make sure the image doesn't repeat
itself all over the site by adding:

body {
background-color: #FF0000;
background-image: url("pictures/picture.gif");
background-repeat: no-repeat;
}

h1 {
color: #CC9900;
background-color: #000000;
}

we can also only make it repeat Horizontally by adding background-repeat: repeat-x;
or Vertically by saying: background-repeat: repeat-y; or make it repeat both vertically and horizontally
by writing: background-repeat: repeat;
And remember the ; at the end.

We can also lock the image to the background by saying:

body {
background-color: #FF0000;
background-image: url("pictures/picture.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}

h1 {
color: #CC9900;
background-color: #000000;
}

That makes sure the image doesn't scroll with the page when you scroll down. We can also say:
background-attachment: scroll; and that makes the image follow the page when you scroll up and down.

And the last thing we will be learing is how to place a background image where we want on the site.
By default the image will be placed in the top left cornor of the screen, lets change that.

There are three different types of coordinates: Percent:% Centimeters:cm and Position:top,left,right,bottom.
I will show you three different examples, first:
Background-position: 2cm 2cm; the image is positioned 2 cm from the left and 2 cm down the page
Background-position: 50% 25%; the image is positioned centrally and one fourth down the page
Background-position: bottom right; the image is positioned in the bottom-right corner of the page
And now it looks like this:

body {
background-color: #FF0000;
background-image: url("pictures/picture.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}

h1 {
color: #CC9900;
background-color: #000000;
}

Go try it yourself and see how it looks.

Now at the very end we can make all this code a bit smaller and manageble, we will compile all the code into one single line:

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

And the orders goes as this: [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
and if a property is left out it just sets it to default.

Thats all for now. Hope you learned something in this second lesson of CSS.
I really hope you will either learn something and give good feedback or just comment on it