Friday,Jun 12 2009, 11:21:22 AMMy Homepage Design Tutorial (II)

My Homepage background image advanced tutorial

Hey guys! After publishing my first theme making tutorial, I see that many Zorpians have started making their homepage themes. How exciting!

Next week, I will be publishing another tutorial; but let me give you a sneak peek of it first

Some advanced tips about customizing homepage theme’s background.

I guess by now, most of you know we can set the background of our homepages with the "background" field in "Style and Look". However, you may ask why does this background image would always repeat itself and align to the left? Little do you know, you can actually change the CSS settings to customize how you want the background image to appear!

First of all, please open "Style and Look", go to the "CSS" tab.

Then paste the following CSS code:

  body{ background-repeat:no-repeat; background-position:center top; }

The statement "background-repeat:no-repeat;" is for specifying the background to not repeat itself. Of course you may always set it to repeat by using the statement "background-repeat:repeat;"

The statement "background-position:center top;" is for specifying where the background image first appears. The first value "center" specifies the image to appear horizontally at the center. The second value "top" specifies it to appear vertically at top.

Here are some more examples:

background-position:left top;	Background image appears at the top left corner of your browser
background-position:left 50%;	Background image appears at the vertical center of your browser, aligned to left
background-position:left bottom;	Background image appears at the bottom left corner of your browser
background-position:right top;	Background image appears at the top right corner of your browser
background-position:right 50%;	Background image appears at the vertical center of your browser, aligned to right
background-position:right bottom;	Background image appears at the bottom right corner of your browser
background-position:center top;	Background image appears at the top center spot of your browser (most commonly used)
background-position:center bottom;	Background image appears at the bottom center spot of your browser
background-position:center 50%;	Background image appears at very middle of of your browser, vertically and horizontally centered

Isn’t this tutorial brilliant? Once you master this, you can control the background image better. Keep optimizing your homepage! Next time, we will introduce how to deal with the heading background of the content module.

64 Views | 1 Comments | Share with Friends | Recommend