karenak Crown

Here's the Categorian Beginner's First Aid Kit - Part Two /a

Use a photo for your background !

Creating a page like this is not difficult at all. However, it requires a few more steps than the other tutorials we have done so far.

Let's have a look at the code:

For the page background

body {
background-image: url(http://...path to the image...);
background-size: cover;
background-attachment: fixed;
color: white; }

For the blog background

.blog {
background-image: url( http://...path to the image... );
width: 960px;

For the blog post or review background

.review {
background-image: url( ...path to the image... );
width: 800px;
margin-left: 50px;}

For the banner

.headpost {
background-image: url( http://...path to the image... );

Step 1 - The Page Background

Find a BIG image for your background but one that loads quickly. Visitors are impatient. Also remember that if the image is too small, it won't cover the entire background unless you scale it. And if you scale it, it'll become blurry or pixelated.

Choose an image that does NOT have its main attraction in the center. That's where your blog will be. So browse those free-wallpaper sites. I'm sure you'll find a good one :-)

The property background-size: cover; means that the image will be scaled until it fills the entire background, whatever screen resolution is used by your visitor.
background-attachment: fixed; prevents the photo from scrolling with the rest of the blog.

Step 2 - The Blog Background

The background of the blog is even more important than the background of your blog posts or reviews since it is also the background for your messages, the friends list, the library and so on. So you must select a color or an image that makes it easy to see the text on those other pages as well.

If you choose the color or image for the blog background well, you might not even need to define a separate background for the reviews.

For the example above I created a 10x10 px semi-transparent .png image:

The width of the blog is set to 960px to allow 30px on each side as padding (meaning the text does not start exactly at the edge of the blog).

Step 3 - The Blog Post or Review Background

The width is set to 800px and the margin of 50px takes care that it is in the center of the blog.

For this example I created a 10x10 px semi-transparent .png image:

Step 4 - The Banner

In most cases it's probably not necessary to set background-image or background-color for the banner. In this case I used the same background image as for the reviews. The padding is the same as for the blog.

>>>> Part Two /b