How To - Add a Background Image

Adding a background image is pretty easy. You Just need the proper code and take a deep breath. Here is the CSS attribute you will need:

background-image: url(http://site-name.com/picture.gif);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;


Now how do you get it to work? Just plug it inside your Style Sheet (CSS) under the BODY section. If you don't have access to the CSS sheet then add this the the HEAD of your webpage.

<style type="text/css">
body
{
background-image: url(http://site-name.com/picture.gif);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
</style>


Altering the code:
Change background-repeat: no-repeat; to:
repeat
repeat-x
repeat-y
no-repeat


Change background-position: center; to:
top left
top center
top right
center left
center right
bottom left
bottom center
bottom right
center
right
left

Change background-attachment: fixed; to:
scroll
fixed


Play around with the above options to see what works best for you and your blog/ site. You can't break anything and any mistakes are easily fixed.

No comments:

Post a Comment