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 (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:
...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 (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:
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 (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.
 |  |  |  |
If you have any question, just ask.....
Smile!
0 comments:
Post a Comment