Let’s get to the point, shall we? Here is the technique:
First, we have to prepare the image that is to be used as the background, and a 1024 x 768 jpg file is the most commonly used type. You can use existing image in the web, and what we need is its direct link (to the file). Don’t forget, be careful with its copyright, since you want more uniqueness, not problems.
You can also use your own image (from your computer), but in that case, first, you need to upload the file to a free file hosting website, such as ImageBoo.com . Then you can obtain its direct link, which is needed to set the codes in the next step.
Just in case, direct link is a link that refer directly to the file, not to the page of a website which contains it, such as "http://imageboo.com/example.jpg" not "http://imageboo.com/example.html"
The next step, we need to edit the codes of the template of our blog. It is accessible through dashboard >> layout >> edit HTML. You might also want to un-check “expand template widget” to simplify the appearing codes. Unless they are still not too complicated for you and you want to complicate things a little bit :D
Then, we need to find these bold codes, which are responsible in authorizing the background of all the pages in the blog. They are located in the upper section of the codes, you can use your browser’s searching tool to find them faster (ctrl+f in Mozilla Firefox).
After finding them, we need to change them into these bold codes:
background:#fff url("direct URL of the image");
Then save the template, and the background shall be yours.
#123 refers to the background color behind the image, which will be shown when visitors opt not to view any image from their browsers. The format is in three-digits color hexa-codes, meaning that the color white will be represented by "#fff" instead of "#ffffff". You can edit this code to show any color you wish. Actually, you can use either 3-digits or 6-digits hexa-codes for this.
Background-position: down-right; refers to the image’s starting position when rendered, down-right. Another options:
- Background-position: center;
- Background-position: top;
- Background-position: bottom;
- Background-position: left;
- Background-position: right;
- Background-repeat: repeat; (both horizontal and vertical repeating)
- Background-repeat: repeat-x; (horizontal repeating)
- Background-repeat: repeat-y; (vertical repeating)
background-attachment: fixed; refers to the setting not to let your background image be scrolled too when visitors scroll the page up or down. Other option:
- background-attachment: scroll;
OK, that's all folks. Any question?