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....
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.
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 backup(1 minute)
-- go to DASHBOARD ► LAYOUT ► EDIT HTML, and find the following part of code:
...this CSS style (code) is from Minima (default Blogger template), so your background line can be a bit differentbody {
background:$bgcolor;
...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:
 |  |  |  |
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:
...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:
...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 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:
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...
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!background: url(YOUR PICTURE URL);
...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 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:
...this is for my example. I've set a background to white, an place my background to repeat horizontally.background:#ffffff url(PICTURE URL) repeat-x;
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.
 |  |  |  |
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:
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:
- 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:
...replacing the part in orange with the URL of your hosted picture..background: url(YOUR PICTURE URL);
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:
...play with these options until you get it right...body {
background:#000000 url(URL OF THE PIC) ;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top center;
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
thank you for info
ReplyDelete