Tuesday's Tips -CSS Basics backgrounds

I've posted many tutorials on how to create different things for your blog. In each of those tutorials I've mentioned ways that you can customize the object. I've gotten several questions asking for more ways to customize the CSS. So I'm going to start a little series on CSS Basics. Some of the topics will include backgrounds, borders, text styles, links, and more. That way you'll have a better understanding of what CSS codes you can add to customize the tutorials. =)

Backgrounds

There are two different types of backgrounds, ones with color and ones with an image.

Color-Backgrounds

background: #ffffff;
background-color:#ffffff;
Either of these codes will control the background color. Use the html code for the color you want your background to be. Do not delete the '#' symbol. ([here] is an online color picker, use the number at the top)

 For example:

background-color:#f5f5f5;

Image-Backgrounds
background-image:url('IMAGE DIRECT LINK');
This is where you will put the direct link to your image that you want to be the background. You will have to upload it to an image host first, before you can get the direct link. (I suggest using imgur or photobucket as your photo host) Do not delete the quotation marks around the url.

background-position: 0% 0%;
This controls the position of your background image. Only change the numbers and do not delete the percentage marks. 


background-attachment:fixed;
This controls if your image scrolls or is fixed when scrolling. (see examples below)

background-image:url(http://i.imgur.com/DUj7n.jpg);
background-position: 0% 0%;
background-attachment:fixed;

background-image:url(http://i.imgur.com/DUj7n.jpg);
background-position: 0% 0%;
background-attachment:scroll;

If you have any questions--don't hesitate to ask! Also, if you have anything that you want me to cover on Tuesday's Tips let me know. (I'm kind of running out of ideas...suggestions are very welcome!)

In Christ,