Youth Venture

January 30, 2008 - 9:48pm — Totem

Formatting your Profile: Cool Backgrounds

In the fist guide, we learned the basics of CSS and profile formatting. In this tutorial, we will do some pretty cool stuff with backgrounds.

Here is the base code we will work with. Put it in your "other goals" section*.
*It really doesn't matter which section you put the CSS in, it is just useful to keep consistent, so I always use "other goals".

<style type="text/css">
body {
background-image: url('http://static3.filefront.com/images/personal/t/totemgufler/120996/prmiwbcape.jpg');
background-repeat:repeat
}
</style>

background-image: url('http://static3.filefront.com/images/personal/t/totemgufler/120996/prmiwbcape.jpg') sets the background image to the image at the url in the single quotes.
background-repeat:repeat makes the background image tile across the whole screen. The image itself is really small. Just look at this.

There, save that and see how it looks. Pretty cool, huh? You can replace that url with any urn that you know of. You will notice that mine is hosted on filefront, though it it a little tricky to get the url for images hosted there.

So that's pretty exciting, a custom background. Here are some other possibilities for background-repeat:

background-repeat:repeat
background-repeat:no-repeat
background-repeat:x-repeat
background-repeat:y-repeat

What if we want to be able to scroll our profiles, but have the background stay still? This is really easy!
So, to do this, simply put a semicolon after background-repeat:repeat and add background-attachment:fixed to the end. The updated code is as follows:

<style type="text/css">
body {
background-image: url('http://static3.filefront.com/images/personal/t/totemgufler/120996/prmiwbcape.jpg');
background-repeat:repeat;
background-attachment:fixed
}
</style>

background-attachment:fixed simply says, don't have the background move AT ALL. Why add the semicolon to the end of background-repeat:repeat? To be able to tell all of the "characteristics" apart, you must put a semicolon after each one except for the last. If there is only one, don't use a semicolon at all.