Tutorials, tips and tricks about Blogger

05 Nov

Background image on your website or blog

0 Comments | by in Design, Tutorials | 2009

Español Português

A website’s backgorund is one of the most important elements of the page, is always there and there’s a lot of available space. In this basic article, we’ll show you how to handle your website’s background with an image.

The first thing you should know is that the right way to get a background image is through cascade style sheets (CSS), modifying the “Background” property on the <body> tag.

So, the modification of the “body” tag has to be done in your .css file, or your web’s space where you make the cascade style sheet, for example:

body {
background:#ffffff url(http://www.tu-sitio.com/fondo-web.jpg) top left no-repeat fixed;
}

Color
The first thing we have on “background” is the background color, in this case #ffffff, wich is the color code. You can modify it as you want. When you don’t have a static background image, it would be the color shown as the next image is loaded.

Route
url() is the location of the image we want as the background.

Location
“top” and “left” give the right location to the background image, and the values can be: top, right, center, left or bottom.

Frequency
“no-repeat” menas the image will not be repeated. This property may also have the following values:

repeat – This is the default value, if you don’t specify anything, the image will always repeat.
repeat-x – repeats the background in horizontal way.
repeat-y – repeats the background in vertical way.
no-repeat – doesn’t repeat the background, it will just have the size of the image.

Visualization
“fixed” means we’ll have a quiet background. This may also have the following values:

scroll – This is the default value, if you don’t specify anything, the background image will move with the text.
fixed – The background image will not move with the text.

If you’re usign the new blogger, you have to do this right before the following code:

></b:skin>

Reply

You must be logged in to post a comment.

Tutorials, tips and tricks about Blogger