Monday, June 8, 2009

How To Change Blogger Background

How to change blogger background?
How to change blog background?
How to change the colour of the background?
How to put image as background?
How to repeat the single image on the background?

Here's how.

First, go to your Edit HTML Template page.

Dashboard > Layout > Edit HTML

Then look for the body { ... } section, usually appear after the Variable Definitions.

body {
background:$bgcolor; margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size: small; text-align:
center; }

It doesn't have to look exactly like that. As long as you found the body { } section.

Now to change the background, all you need to do is play around with the background: line.


Change Background Colour

background: #FFFFFF;

Just change the #FFFFFF to other hexadecimal colour value. #FFFFFF is white. For more colours, check them out here here.

Also, you can put the colour name if you want.

background: white;

However, for more variety of colours, you are recommended to use the hexadecimal colour code.


Add Background Image

First upload your background to the Internet - ImageShack, Photobucket or any of your favourite photo uploading sites. Then obtain the direct link to the picture.

background: url(LINK);

Just add the image URL to LINK and you're done. Also you can modify the positioning and location of the image.

Just add these code after the URL part.

Repeat the image horizontally (left to right):

repeat-x

Repeat the image vertically (top to bottom):

repeat-y

No image repeat:

no-repeat

Repeat both vertically and horizontally:

(don't put any "repeat" tag)

Position image to the left or right:

left (for left side)
or
right (for right side)

Position image to center of screen:

center

Fix image on background (to prevent image from moving when scrolling):

fixed


Now your complete background code may look like this:

background: #FFFFFF url(http://abc.com/image.jpg) repeat-x fixed;

So just play around and you'll understand it. Enjoy!

71 comments:

wayeyoung said...

8)

戆居居看天下 said...

thank a lot

Pirate Dixie said...

Oh My Goodness! THANK YOU!
How can I do sidebar images?
This has been an event of patience and heavy breathing!

SimpleBloggerTips said...

@Pirate Dixie:
you can add images with the "HTML/JavaScript" gadget and include this code (without the *) :

<*img src="IMAGE LINK">

that's all.

Nicola said...

Trying to add an image onto my background, it's not working? Code reads as background: #C0C0C0 url(http://www.flickr.com/photos/47804463@N02/4381199355/) repeat-x fixed;

any ideas????

Ankur said...

Thanks a ton B

Simple Blogger Tips said...

@Nicola:
The URL might be wrong. All photo URLs should end with .jpg or other image extensions.

Ivy Antonio said...

Help! Sooo happy I found you. Just followed your directions to add a background image but its not working here's what I have

background:url(http://s763.photobucket.com/albums/xx280/ivyantonio/?action=view&current=blogbkgrdcopy-1.jpg);

Grrrrhhh... help please! thanks

Simple Blogger Tips said...

@Ivy Antonio:
The URL is wrong, you should get the URL of the image. Not the URL of the webpage containing the image.

The correct image URL is this:
http://i763.photobucket.com/albums/xx280/ivyantonio/blogbkgrdcopy-1.jpg

Hope it helps. =)

heidilauramay said...

Thanks for this page, v helpful but my background image wont show, I have:

body {
background: url(http://i208.photobucket.com/albums/bb230/supertinkalicious/white-and-black-polka-dot-fabric.jpg)repeat-x;

x

Simple Blogger Tips said...

@heidilayramay:
The code seems fine. Try ignoring the "repeat-x" at the end since the image is small. =)

Rikipu said...

im trying to put a dektop background as my blog background and it fits perfectly well on my large computer screen. however when i upload it onto a website (picasa or twitpic) the resolution of the picture becomes much smaller, and when i post this link into my blog HTML it repeats the picture. how can i make this picture be just one background in the back instead of 4?

Simple Blogger Tips said...

@Rikipu:
Try uploading the picture to Photobucket or Flickr, I think the resolution doesn't change there. And for no repeat, it's written up there - "no-repeat" after the code. =)

天星草 said...

thanks a million!

^baBy^viCky^ said...

Thanks a lot

Creator said...

http://www.burnoutnews.blogspot.com

Any ideas how i could make background to take all space on my blog, because now when i put background i still can see that building on top and left side as u can see in link, that template is chosen from blogger main templates.
If u know how pls contant me out there, there is a contact button.

Simple Blogger Tips said...

@Creator:
It's not possible to "drag" the current background picture to fit the whole screen. That's the default background and it has it's specific size already. Dig into the HTML code, as shown on this entry, and add in your own background image.

me said...

ARGG mine won't show any clue?

I have:
body {
background: #FFFFFF url(http://i811.photobucket.com/albums/zz40/julias456/Background.jpg?t=1271452846) repeat-x centre;
}

Simple Blogger Tips said...

@me:
Remove the ?t=1271452846 at the back of the link and it will work.

me said...

alright, so I figured out how to do it, thanks, I'm wondering if there's a way to make it so that it takes up the whole background. right now it's on repeat. It will do, but i'd like it too just be one picture. Thanks for the help!

SkyFairy said...

hi i wan to ask~ when i scroll the image behind is fixed, how to change that?

Julias456 said...

Thanks, that worked. Now, I'm wondering how to make it take up the whole background?

me said...

Thanks. I have the backgroudn working now, but I have it on repeat, is there anyway to make it take up the whole page?

Simple Blogger Tips said...

@me:
if you want the picture to repeat the whole page, include "repeat-x" and "repeat-y" as well. so that, it'll repeat both vertically and horizontally.

@SkyFairy:
Do not include "fixed" in the line if you want the background to be scrollable.

@Julias456:
Like what I've mentioned, include "repeat-x" and "repeat-y" to the line.

_ said...

hi, can't seem to do this at all:

body {
background: #800080
url(http://upload.wikimedia.org/wikipedia/commons/7/79/FreddieMercurySinging21978.jpg);

and it still doesn't work. help!

Simple Blogger Tips said...

@_:
I've tried to use your image link but it doesn't appear as well. I suggest you to use another image, since that image is perhaps too large. Or also you can upload it at photobucket or imageshack for better viewing.

:: *girlorbital said...

You're a legend mate, thank you x

Su Yin ♥ said...

how to make the picture repeat on left to right and top to bottom?

Simple Blogger Tips said...

@Su Yin:
Don't include any "repeat" then, it'll repeat both horizontally and vertically.

IVYALLOVER said...

Thanks for your help on the background - now I have a different question. How can I change the background but keep the background under the main body -not sure what this area is called but its where all your copy posts go - how can I keep that area white? I'd love to drop a texture in the background but have it go around the main part of the blog making it easier to read the content. Hope this makes sense. Love this blog!

Simple Blogger Tips said...

@IVYALLOVER:
You change the background colour at ".content-inner". It will then add the colour of the background of the content.

For white the hex code is #FFFFFF

IVYALLOVER said...

ok sorry but I just can't find the ".content-inner" in my code? grrhhh :(

Simple Blogger Tips said...

@IVYALLOVER:
since you're using the default blogger template, you should search for #outer-wrapper.

add: background: #FFFFFF;

yan said...

i'm using the 'minima black' template.
how can i change the background but keep the background under the main body as IVYALLOVVER?

Simple Blogger Tips said...

@yan:
then yours would be at #outer-wrapper as well.

add: background: #000000; - if you want it black.
add: background: #FFFFFF; - if you want it white.

Dr Faustus said...

Thank you VERY much for the tutorial.

Blessed Flower said...

Hi, thank you for your blog. I have a question.

What is the best size of the background picture to upload on Photobucket so that it appears in that size in my blog background. I have a problem that for some reason picture looks smaller. Any ideas?

Tatiana said...

Ugh! I've tried all of your suggestions from above, but when I started my blog I copied and pasted a fixed wallpaper into the html gadget and now no matter what I do I cant remove it. It doesn't even show in my layout. I've tried changing my "outer-wrapper" and my "background." Any suggestions?

Simple Blogger Tips said...

@Blessed Flower:
The size is very subjective. If you upload a photo enough for your 13" screen, it might be not enough for a 27" screen. The best way is to decide on a good background image - either an image that is centered, left-aligned or right-aligned OR repeat them.

@Tatlana:
Did you mention "HTML Gadget"? The one at the "Page element" section? If yes, then I think it's the wrong way. You should go to "Layout > Edit HTML" to perform these codes.

But if you're doing it at the "Edit HTML" section, I can't decide on what's the problem.

Tatiana said...

You were right...I had the code in the wrong place. Thank you so much!

Blessed Flower said...

Thanks for the the answer... I think I am having problems with Photobucket... it shrinks my pictures for some reason... it is annoying!

I want my picture centered so it is around but I'm having problems with placing it AROUND... somehow photobucket always shrinks my picture so its never AROUND but much smaller... I can't get around to figure out way to work it out :s

aLexis said...

hi! this is the url, the background doesnt appear. :(

http://www.facebook.com/photo.php?pid=350312&l=64f391beb9&id=100000140231446_350312_1352115_n.jpg

help pls.. thanks alot!

Simple Blogger Tips said...

@Blessed Flower:
Yes, the photos will be in thumbnails, but view the image to its largest 100% size before copying the image link.


@aLexis:
That's the link to the photo page on FB, which is not the direct link to the image. You should right-click on the image and click "Copy Image Location" and the direct link will be copied.

It should be something like this:
http://sphotos.ak.fbcdn.net/hphotos-ak-snc3/etc...

aLexis said...

ogey, thanks alot ken! ^^

qeera said...

hi..ive tried various links like flickr, picasa and it didnt work..this is how its like, body {
font: $(body.font);
color: $(body.text.color);
background: IndianRed (http://lh5.ggpht.com/_g3hK3uofROk/TBdJFt1_DvI/AAAAAAAAAA0/Ef8d8AjbIO4/buttercream-cupcakes.jpg)right no-repeat fixed;
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

Simple Blogger Tips said...

@qeera:
You missed the "url" before the (link)..

It should be:
background: IndianRed url(http://lh5.ggpht.com/_g3hK3uofROk/TBdJFt1_DvI/AAAAAAAAAA0/Ef8d8AjbIO4/buttercream-cupcakes.jpg)right no-repeat fixed;

cee said...

thank you!

http://chaoticdesolation.blogspot.com

The conscienne said...

I'm using the Simple template (part of the newer template design system) and my code is



what would I change if I wanted to change the outer background image to the url http://i499.photobucket.com/albums/rr351/JLoftin_album/wallpaper1pattern.png?

Please help. Thanks

Simple Blogger Tips said...

@The conscienne:
You should find the body { section. The instructions are written above.

TrueAyat said...

Hello,Just Want To Ask,Since I Changed My Background Image,I Can't Seem To Change My Font Colours Of The Header,And The Time And Date I Posted It.Mind To Show Me How Do I Do So?

Simple Blogger Tips said...

@TrueAyat:
Font colours can be changed at Design > Template Designer. Date and time can be changed under Settings. =)

Mimi said...

Thanks a lot for this post! This is really useful!

I'm having trouble with one little thing. I'm trying to have it fit to screen, but it keeps giving me this error message:

Invalid variable declaration in page skin: This is not a recognized background variable value. Backgrounds must have exactly six components. Input: #539bcd url(http://img811.imageshack.us/img811/9966/dsc00883x.jpg) no-repeat fixed center

How can I fix this? Thanks again!

Trä & Sten Home Improvement said...

My background doesn't show!!
I have this code:
body {
background:#FFFFF;url(http://img832.imageshack.us/img832/8683/cement.jpg) repeat-x repeat-y fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
please HELP ME!!

Thanx...

Simple Blogger Tips said...

Tra & Sten:
The "background:" line has error. Use this instead.

background: #FFFFFF url(http://img832.imageshack.us/img832/8683/cement.jpg) fixed;

Clara said...

I still do not know how to change my Blog back gurond in HTML... I need help please

Simple Blogger Tips said...

Clara:
This tutorial is pretty straight-forward. If you can't, get a friend to help you. All the best.

Matt Dixon said...

thanks for your help with the fixed background image!

mario said...

I’m a big fan of this blog and I check it regularly. Keep up the great work!

Lara Johnson said...

Hey, can you take a look at this link:

http://www.shabbyblogs.com/backgrounds.html

I'm trying to put a background, and there is explanation HOW... And they say in step 6:

'Under "Content" paste the entire code from the box below'

My problem is - I'm not sure where to paste the code. I found "Content" part, but should I copy this in BODY or... I don't know... :(
I tried something but newer worked :(
Do you know how this works???

Tnx! :)

Simple Blogger Tips said...

@Lara Johnson:
You'll need to copy + paste the whole code into the white space (aka "Content") after you clicked the "HTML/JavaScript" gadget.

server 2008 said...

Thanks for these tips. I am new to blogging, so they will surely come handy.
George

Rob said...

Hi There

On my blog http://buchulife.blogspot.com/ my background code says
background: $(body.background)

There's a gradient that lasts for top 370px roughly.

Now when I change the background code to

background: #FFFFFF
or for example to

background: #FFFFFF url(http://img832.imageshack.us/img832/8683/cement.jpg)

Below the 370px mark is just white, and above it is my regular green gradient background as it was before.

I found out that I can control the gradient colour by changing the colour of the following code




Any idea how I can replace my current background with an image?

Thanks

Simple Blogger Tips said...

@Rob:
"background: #FFFFFF url(http://img832.imageshack.us/img832/8683/cement.jpg)" is the correct code. But it seems you didn't add it on your HTML section.

Emily Rose said...

I'm trying to add this pic:
http://s1209.photobucket.com/albums/cc394/PookiePorkChops/?action=view&current=Starbackground.jpg
to my blog. But it is unable to save my template because:
"Invalid variable declaration in page skin: The skin variables could not be parsed as they are not well-formed."
Errr any ideas? Thanks!

Simple Blogger Tips said...

@Emily:
That link is not the image link. It's the link to the image page on Photobucket.

The image's direct link is this - http://i1209.photobucket.com/albums/cc394/PookiePorkChops/Starbackground.jpg

Use this link instead.

kcbonehead said...

thanx pal. XD
nice tips.

Hyphen Interiors said...

I tried this with a chevron pattern at testblogforhi.blogspot.com. It only shows on the left and when the window is small, it intrudes on the middle section. Any thoughts? Please email me as I may not check back here. (I still need to tweak the image, but getting the code straight first.) Thanks!

Jayne said...

Thanks for the tips. It helped me a lot.

Abid khan said...

Very nyc sharing.. It works for me..

Er Manoj said...

nice tutorial.

takasih tahu said...

makasih ya mas :D

Related Posts Plugin for WordPress, Blogger...
Follow Me on Twitter