How to add background picture in Blogger?

December 5, 2008

Adding background picture (image) in Blogger is a great way to stylize your personal Blog, and make it stand out among the others. This way, you can personalized it, and make it recognizable and unique.
And it's quite easy, really....

WHAT CAN YOU DO?

• you can choose any picture you like for background
• or find some free backgrounds on internet
• it can be across the whole screen, or in the place you want it to be
• you can use small pictures (images), big ones.....
• whatever you imagine......well, almost.

...in Blogger, with "Fonts and Colors" options, you can change only the color of your background (and not in all templates...), and this, sometimes, is just not enough...


BACKGROUND STYLES
When choosing the pic, note that there are 2 different styles (types) of pictures (images) used for backgrounds:

1. small images (usually textures or gradients) that are either 1px wide, or appear as a little square...
...the thing with nb 1. is that you use that little image, and tell blogger to repeat it all over the screen....(the page load time is faster)

2. pics with certain size (width and height)
...and nb 2. is a picture, with a certain size, and you CANNOT expect from Blogger to fit it perfectly on your screen. It will appear the same size as it is (page load time slower).


WHEN YOU HAVE THE PIC, NEXT THING IS:
-- to upload your picture (image) to a free web host (like Photobucket, Tinypic...) to get the URL address of the pic, which we'll use in Blogger code...
-- back up your blogger template (1 minute)
-- go to DASHBOARD ► LAYOUT ► EDIT HTML, and find the following part of code:

body {
background:$bgcolor;

...this CSS style (code) is from Minima (default Blogger template), so your background line can be a bit different
...important thing is to locate background: and is has to be in the body { section...
...that's the line of code we will use for adding background pictures (for all examples)


ADDING BACKGROUND PICTURES IN BLOGGER

:Pictures (textures, gradients) that repeats all over the screen:

Continue reading...

This is the easiest (and quite fast) way op applying the background. Ok, you have the pic. Next thing is to place it into Blogger. Your code should look like this:

body {
background: url(YOUR PICTURE URL);

...just replace the part in orange with the URL of your hosted picture...Save Template. And that's it!

...there's always BUT. If your template doesn't have colored Post section, Header and Sidebar you'll notice that your text is barely visible...
So, you have to add some color to those sections. You have to find codes (CSS style) of those sections, and add the following line to them:

background:#000000;

....the hex value represents color (in this case, black). Change it to whatever color you like. Look here for color values.

...if you're thinking: "where are those sections in code? ...where to put this line?", I can show you the example for Minima:

- Post Section + Sidebar + Header --> #outer-wrapper {
- only Post Section -----------------> #main-wrapper {
- only Sidebar ----------------------> #sidebar-wrapper {

....just place the code under those lines. If you can find the exact same lines in your template, well, you'd have to figure it out then. But it's just a variations of this usually....(like: "#sidebar-wrap {. ", or "#main-wrap1 {".....)

To add a Gradient as a Blogger background (example here), it's a bit different. For this, you'll need to make a gradient in some graphic software, and cut a small piece (vertical, or horizontal) that you'll use as background.
Then you have to tell Blogger to "spread it" across the page, with this lines:

background:#ffffff url(PICTURE URL) repeat-x;

...this is for my example. I've set a background to white, an place my background to repeat horizontally.
repeat-x ---------> horizontal
repeat-y ---------> vertical

My pic is a thin line 10px wide, and has height 1200px. The gradient is from brown (top) to white, so the background Color (#ffffff) takes over the gradient when you scroll down...

:Pictures with fixed size:
Personally, I prefer this ones. Because you can be more creative.

Continue reading...

The things you should take care of here:
- the size of your background pic
- position of the picture
- the size of your blog area

...well, all of this depends on the effect you'd like to achieve. We will use the following line to apply our picture to background:

background: url(YOUR PICTURE URL);

...replacing the part in orange with the URL of your hosted picture..
We also need to specify the options for our picture. We have to tell Blogger:

- if it will repeat the pic or not:
background-repeat:no-repeat;
background-repeat:repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;

- do we want our pic fixed (same picture when you scroll, example here), or the one that will "scroll" along:
background-attachment: fixed;
background-attachment: scroll;

- where will the picture be placed:
background-position:top center;
(you can also use 'top left', 'top right', 'center left', 'center center', 'center right', 'bottom left', 'bottom center', 'bottom right')

background-position:top center; x% y%
(here, specify the horizontal and vertical position, i.e. 110% 35%)

Here's the example. I have a picture, and I want to center it, I don't want it to repeat, I want it to be fixed (it will be like a frame around my blog). The code (CSS style) will look like this:

body {
background:#000000 url(URL OF THE PIC) ;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top center;

...play with these options until you get it right...

WHERE TO FIND FREE BACKGROUNDS?
The ones used in this tutorial:
Squidfingers
The Cutest Blog On The Block

Other places:
BGpatterns, DinPattern, StripeMania, Ava7Patterns, Background City, ColourLovers

If you have any question, just ask.....

Smile!