Using image as background

Using image as a background can be implemented easily using CSS (Cascading Style Sheet). In Blogger CSS can be accessed by going to Dashboard > Design > Edit HTML tab. CSS is the area between <b:skin><![CDATA[ and ]]></b:skin> in the template code.

(Update: If you are applying the background to a template made by Blogger Template Designer, use this method instead: How to use your own background image in Template Designer).

The image can be of jpg, gif or png formats. You may want to choose an image which tiles seamlessly (but then, it’s up to you).

There are many websites providing free background images and textures. A website, GRSites.com shows you a live preview, so you would be able to see the image in action even before downloading it.

Note: Examples below use body element as the selector. You can replace it with any HTML id, class or tag you want e.g. #content-wrapper, .comment-block, .sidebar, p etc.

Now let’s go into the details:

 

Setting the background color

When specifying a background image it is a good idea also to specify a background color. The color you select should be similar to the prevailing color of the image. This will ensure the page will still look close to the way you intended even if the image fails to load or the user purposely has image turned off.

body { background-color: #aa3333; }

 

How to set an image as the background

body { background-image: url(YourImageUrl);}

Replace YourImageUrl with the direct link to your image.

 

How to repeat a background image

body { background-repeat: repeat }

This code will repeat (tile) your image to fill the element you specified.
repeat is the default value for this property.

If you only want to repeat it vertically then use repeat-y instead of repeat.

To repeat horizontally, use repeat-x. Useful when you want to use vertical color gradient as a background.

To stop the tiling effect, use no-repeat. Then only a single image will be shown.

 

How to set a static/fixed background image

body { background-attachment:fixed; }

If you want the background to scroll with the rest of the page use scroll instead of fixed.

 

How to position the background image

body { background-position: left center; } 

The first value is for horizontal positioning, with acceptable values of left, center or right.
The second value is for vertical positioning, with the values of top, center or bottom.
You can also use pixel or percent, as in 20px 40px (or 30% 10%). The 20px is for x-position from left, and 40px is y-position from top.

 

All the background properties in one declaration

Rather than setting the properties one by one, you can also do it in one declaration e.g.:

body { background: #aa3333 url(YourImageUrl) no-repeat fixed center; }

 

Adding a good non-obtrusive background can help enhance the way you blog look. But remember one thing, inasmuch as you or you think your readers love your background, it is your blog content, not the background that makes your visitors want come back (or not).

For more information regarding CSS background, visit w3schools.com.

 

Technorati Tags: background,css