How To Add Picture to Background. ~ The Blog Doctor.
Loading...

How To Add Picture to Background.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

To add a Picture to the background of your blog...............

Step 1. FIRST create a free account at Googlepages (http://pages.google.com) to host your image/picture. In the Page Manager go to bottom frame of sidebar and click on Upload. Browse to your file on PC and click Open to upload it to your Google Page Account. At the present they offer 100 MB free disk space. Right click on the uploaded file and choose Copy Link Location. This copies the URL of the picture you have uploaded.


Step 2. Login to the Dashboard. Click on Layout under name of blog you want to add picture to. Click on Edit Html tab next to Page Elements tab. This opens the Edit Template page.


Step 3. First backup your whole template using methods described in How to Change Template.

FOR SAFE BLOGGING. Use Download full template link in edit Html subtab of Template tab.


Step 4. Then scroll down in Edit Template text box till you come to :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

This is part of the code CSS (Cascading Style Sheet) described in Parts of the Template. This describes the whole background of your blog. To add an image here you have to add the following code before the '}' at the end :

background-image:url(WEB URL OF YOUR PICTURE );
background-repeat:no-repeat;
background-position:120% 10%;
background-attachment: scroll;

SO THAT IT LOOKS LIKE THIS :

body {
background:$bgcolor;
background-image:url(WEB URL OF YOUR PICTURE);
background-repeat:no-repeat;
background-position:120% 10%;
background-attachment: scroll;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Instead of "WEB URL OF YOUR PICTURE" copy paste the URL of your picture at Google Pages from Step 1. The third line describes the position of the image. The first figure (120%) controls horizontal placement. The second, vertical (10%). Negative percentages will move the image up or to the left, in relation to the containing element. The repeat attribute controls tiling. If instead of 'no-repeat' you add 'repeat-x' itwill tile horizontally and 'repeat-y' will tile it vertically. The scroll attribute means your picture moves along with the textwhen you scroll up or down. If you want the picture to remain fixed while your text scrolls past it or over it when you use it as a background then change 'scroll' to 'fixed'


Save Template. Refresh Cache. View blog.



TO MAKE A CLICKABLE IMAGE BACKGROUND ON YOUR BLOG

First locate the image and upload it to a free hosting account like Google Pages. Copy the URL of your image and keep.

Then create a division to hold the image on your web page. This is done by pasting the following code in your CSS :

#imageholder {
float:right;
}

This positions the image in the upper right hand corner of your blog.

The Clickable Image is rendered by pasting the following code after the <body> tags :

<div id="imageholder">
<P><A title="TITLE OF YOUR BLOG" href="URL OF YOUR BLOG"><IMG border="0" src="GOOGLEPAGES URL OF IMAGE" alt="ALT. TITLE FOR TEXT BROWSERS AND SEARCH ENGINES" ></A></P>
</div>

In HTML the <img> tag has no end tag.

In XHTML the <img> tag must be properly closed.

Save Template

Technorati Tags:, , ,

201 comments:

baldovij said...

Thanks for the info. I havent used HTML formatting since College so Im a little rusty.

Jose

Camilla said...

Hi! I think I followed all the steps properly, but I should say I'm a complete novice. Anyway, everything is changed in the html field, but nothing has changed on the actual blog. I didn't know what "refresh cache" meant so I pushed the refresh button instead. Could that be it? explain it to me like I'm a seven-year-old...

vin said...

Camilla,
See this link :
How to refresh Blog page

jamie said...

hi... i followed the directions for this and all went well... until i changed my mind and wanted a different picture as the background. everytime i paste a different picture url and preview, it turns black with no image. what am i doing wrong?

vin said...

jamie,
Try refreshing the cache. See :
How To Refresh Your Blog Page

jamie said...

thanks, but still not working. :(

vin said...

Jamie,
What is your blog url? For detailed help email me. The address is in the left column.

Mike said...

Hi. I just tried to post a background using this and I managed to cover half of the screen. I looks kinda cool though.

The biggest issue is I couldn't get a pic to cover the entire background, even after increasing the size of the pic

Any suggestions.

vin said...

Mike,
Use background-repeat:repeat-x; to tile picture horizontally or -y to tile it vertically.

Use my email address in the left column for detailed help.

Sidian Morning Star Jones said...

I did this all just right but my blogger likes to say: Invalid variable declaration in page skin: This is not a valid color value. Input: #
So I took all the background code out and tried preview again but it said the same thing so it doesn't seem to have anything to do with this code here. What does it mean?

vin said...

Sidian Morning Star Jones.

You seem to have not put a # before the hex number color code. Check all color properties in template.

For detailed help use my email address in left column.

Sakaki said...

I was wondering, how can i put a background image just for my posts? no for the whole background.. any tips?

vin said...

Sakaki,
Look in your template for this type of code :

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Then apply the same method shown in the post above.

MBellamy said...

hey, i did everything you said including refreshing the page still not working, i think there my be a problem with my code???

vin said...

mbellamy,

What is your blog url? For detailed help use my email address in the left column.

Jamie said...

I was trying to find on your site information on putting a background image on your blog and then having a translucent background on the posts etc.
I can only work out how to make the background of posts completely solid (and thereby blotting out the entire picture). Could you please help me out with the code required?

Thanks

Jamie

vin said...

Jamie,

You will have to lighten that part of your background picture in an image editor like Photoshop or Paint Shop Pro.

Jamie said...

So blogger doesn't have any code that can be used like my space? I got the following code off some myspace generators but it doesn't work when I apply it to posts/sidebars/header/footer etc. in Blogger.

filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; -khtml-opacity:0.7;

Is there anything similar that can be used in Blogger? The only photo editing software I have is Paint so I can't really change it by editing the actual photo.

vin said...

Jamie,

Try applying your filter property in the CSS and then checkout the blog in IE6. Also see this page in IE6 :

http://www.fred.net/dhark/demos/css/css_filter_examples.html

karoline said...

More than one widget was found with id: LinkList1. Widget IDs should be unique

this is the error message i keep getting and i haven't a clue where to change the widget id...

i want a patterned background with black ontop underneath the posts.

help?

http://karolineswednesdayschild.blogspot.com/

Richmond said...

I also tried to change my background and nothing is showing up, just the plain white background that was there before.

my url is http://tjnicm.blogspot.com

vin said...

Richmond,

Always refresh cache after saving template or you will see an old copy of your page. See :

http://betabloggerfordummies.blogspot.com/2006/10/how-to-refresh-your-blog-page-in.html

Richmond said...

ops correction my url is tjnicmtest.blogspot.com

karoline said...

vin

thankyou i finally got it...

k
:)

vin said...

Richmond,

Reload your template first as there seem to be just a white background in it. Also this code is wrong :

body {
background-image:http://brichbk.googlepages.com/paper.jpg;

See post above.

Richmond said...

Vin

Thanks for all your help. I got it fixed.

Anonymous said...

thanks.. it worked, my problem now is that i want to put two background-images, how can i do this?!? HELP PLEASE!!!

vin said...

Anonymous,

Either combine the two images into one image using a photo editor and put a transparent background between the two. OR make a new div in the CSS and put the other picture in it.

Robert said...

incredible site!!! I have used it so often and everything has worked for me just right. Thank you, thank you, thank you...I was truly lost without it.
Question: I've added a picture to my blog background, which I'm quite happy with, but I also want to change the background color to more of a patterned background. I thought I could just add the patterned image I have, a very small patterned tile, just like I added the picture to the background and then just repeat it in both directions but it doesn't seem to allow me to have 2 pictures added the way you've shown us how to add 1. Do you understand? Is it possible? Thanks for your insight.
Rob

Crystal said...

Hi i am using the widget 3 column code for my blog found here: http://weblensblogs.blogspot.com/2007/04/3-column-widgets-compliant-blogger.html
I have used your directions and hers found here: http://weblensblogs.blogspot.com/2006/01/blogger-template-hacks-background.html
and have refreshed the cache but back ground is not showing up. Here is my blog link www.crystalchesser.blogspot.com
Can you think of anything else i can try to get a image in my background? THanks for your time and help!!

vin said...

Robert,

Combine your two pictures into one with an image editor (if possible) and use that.

OR you have to create separate 'divs' in your CSS part of template for separate pictures.

vin said...

Crystal,

Which code did you modify/add in the template? I can't see any modifications.

jen said...

Hi--

I've been trying to put a background on my friend's blog for over an hour now, and I keep checking the script, and it looks fine. I've even copied it directly from this tutorial and other sites that have a working background, and it just shows up creamy.

Help!

garrettfam.blogspot.com

vin said...

Jen,

What is the link of the blog you are working on? Also remember to refresh cache after making changes to template.

Shannon said...

Thanks! You rock. Worked perfectly, and I have zero technical expertise. Especially appreciated the explanation of tiling and scrolling. You can check out my results at http://zokai.blogspot.com. More designs to come I hope. Great fun.

EeFang said...

Thank you so much.
I have been thinking that why doesn't blogspot has other feature like uploading pictures as the background.
It seems like i am completely wrong about that.
Thank you so much!

fangfang89.blogspot.com

Joe said...

I would like to put pictures around the outside borders (not covering anything else) but am still at a loss?
Thanks - Joe

vin said...

Joe,

You can put pictures as above then to prevent them from showing in your posts column and sidebar give them some colors. See :

http://betabloggerfordummies.blogspot.com/2007/05/tips-to-customize-blogger-template.html

STEAMER Hockey said...

Sorry Vin, I still can not get it. I do not want the background picture to cover any text or posts. Here is a BLOG as an example: http://jibblescribbits.blogspot.com/
I hope that makes sense.
Thanks again - Joe

vin said...

Steamer Hockey,

Use View--->Page Source in browser menu to see the template for his blog :
body {
.......
background:#cfcfcf url("http://img186.imageshack.us/img186/9724/avs3co7.png") repeat;
}

This shows the background picture in the blog. It does not show up in the main column because of this code below that :

#outer-wrapper {
background-color:#222E6A;

Here the different color shows up and no picture background is specified.

-JSG said...

Thanks so much for the info, as I had forgotten how to do this and your page has saved me so much time in "guessing" ;)
only one thing, my background picture has now "slid down" under the header bar. Before I posted my second post, it was behind it and I preferred it that way, any suggestions?

Thanks so much.

-JSG said...

also...
how do I make it "fixed" so that only the words scroll?
thanks again

-JSG said...

ok, sorry for the multiple comments, but, I did get it figured out, so you can ignore my plea for help ;)

Brendan Koop said...

Thanks so much for your help, this is the only page that helped me do exactly what I wanted to do for my blog. I have one problem though, which is that I am using my background in a very specific placement on my blog, and in Firefox and Safari it looks perfect. But in IE (I only have 6.0, I don't know if this is a problem in 7.0, but about 20% of my readers access the blog in IE 6.0) the image is shifted to the right by 10-20 pixels or so, enough to throw it totally off where I wanted it to be and it doesn't look good. Why would this image be shifted over in IE? Is there code that I can enter to fix this in IE without altering the already good appearance in Firefox and Safari?

Lara said...

I'm a complete novice and it worked beautifully for adding a background paper to my blog. Thank you!

keith said...

do u think u can help me put a photo on background?

self-lives.blogspot.com
nothing is coming out
this is my code- anything wrong with it?
body {
background:#fff;
margin:0;
background-image:url(http://www.flickr.com/photos/olivetree/422019139/ );
background-repeat:no-repeat;
background-position:120% 10%;
background-attachment: scroll;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

vin said...

Keith,

Upload your image to Photobucket.com and use the link from there. Also see first part of this post :

Transparent background for Blogs

Selena said...

Oh, I've tried over and over, I am stumped! I have my code looking exactly the way yours does, my image is hosted at photobucket...when I type the url into the address bar the image comes up...but when I add it to the html nothing happens...what am I doing wrong? I am also having issues adding an image as my profile pic, when I add the url and save the changes it disappears? Is it me? thanks for the info...in theory it should be working no problem!

vin said...

Selena,

This is your code :

background:#32527A;[url=http://www.hotlinkfiles.com/view/full/605515_tvpof][img]http://www.hotlinkfiles.com/thumbs/small/605515_tvpof/blue12.gif[/img][/url]

while according to what I have shown in the post above it should be :

background:#32527A url("http://www.hotlinkfiles.com/thumbs/small/605515_tvpof/blue12.gif");

Also add the repeat and tiling parameters as shown in above post.

As for profile image can you paste the link which you are pasting so we can check it out.

Selena said...

Vin,
I seem to have straightened out my cutting and pasting! It always works out after you finally ask for help! Thanks for your quick response!

Selena said...

I hope this doesn't show up twice! It's me again. I have gotten the background to work...and I'm happy with it, but I am wondering why people using mozilla browsers don't see anything in my blog? just background, no pics, posts, links, anything? help! Thanks, vin.

vin said...

Selena,

You may need to reload your template.

Selena said...

Vin,
this may seem dumb...but what do you mean by reload? Start over? Thanks.

vin said...

Selena,

If you have a prior backup of your template you can reload it by going to Template---->Edit Html---->Click Browse button and select your template file on your PC and click Open. Then click Upload.

reyes said...

Reyes

Hi,i have open a new account,and i wan to put a background picture for my blog,but i cant do it,can you check for me?

my bolgger is
www.allyadrianweddingalbum.blogspot.com

my email address is chan_siewmun@yahoo.com

can you teach me?Cos i wan do a wedding album for my fren's wedding present.Thanks Very Much!!

herwardrobe said...

Hi,

I did what you wrote above and I still see my old background color.

This is what I did:

body {
background:$bgcolor;
background-image:url(HTML CODE FROM PHOTOBUCKET);
background-repeat:repeat;
background-position:120% 10%;
background-attachment: scroll;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Do help me.

My website is http://hershoppingplace.blogspot.com

Vin said...

Herwardrobe,

From your page source I see your code as follows :

body {
background:#C8BBBE;
background-image:url(img src="http://i164.photobucket.com/albums/u18/hershoppingplace/wallpaper/snow_180.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket;
background-repeat:repeat;
background-position:120% 10%;
background-attachment: scroll;
margin:0;
color:#000000;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

CHANGE IT TO :

body {
background:#C8BBBE;
background-image:url(http://i164.photobucket.com/albums/u18/hershoppingplace/wallpaper/snow_180.jpg);
background-repeat:repeat;
margin:0;
color:#000000;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Use Preview to check before saving

Melody said...

Hi Vin, thanks for your guide and I managed to do it. However, when I added the picture as background, the 3 Adsense Ads' background(plain color) are difference from my blog's background.

Is there any method to change the background of Adsense ads to "transparent" so that it just appears the text and same background like my blog?

Thanks.

vin said...

Melody,

You can configure the Ads background color to be same as posts background color but I do not think it can be made transparent. Try blending it in by choosing the same color.

Minoccio said...

Thanks for the info, that's exactly what i needed, and it worked!!! =)

jennisay said...

Thanks for the inpormation to help how to cheng my background.

I got it....!!!!
http://jennisay.blogspot.com/

Jimpa said...

Hi Vin, I have a problem. You'll see, I want to put several pictures in the background, as he does ==> http://vinofallado.blogspot.com/

I don't know how he does, and i think you could help me

please answer me in my blog http://resurrectedteletubi.blogspot.com/

or my email joaquinimparatta@hotmail.com

BLTP said...

Very useful blog cheers.
I can post a picture in the background how do stretch it a cross the whole background I don't mind distortion or can store a bigger pic. I don't want to repeat the same image I just want one picture in the background.
thanks for your help
http://nostalgia4dafuture.blogspot.com/

Vin said...

Bltp,

You need a picture whose width is equal to the width of your monitor's resolution.

To see the width of your monitor in pixels go to Display Properties via Start---->Control Pannel and click on the Settings tab.

NOTE : that it may not display the same on monitors with different width resolutions.

BLTP said...

cheers for that

Richoos said...

Hi, I have followed the code and instructions as layed out, cleared cache and refreshed page, though the picture just wont appear. I know I am most probably overlooking something minor. Please help.

Chris S. Richardson said...

Sorry, not sure if you got the web link as I posted not signed in. So reposting this comment.

I have followed the code layed out, but the picture is not showing. Was wondering if you could take a look as to what I have done wrong. Cheers Chris.

Vin said...

Chris,

Try the code without any parameters like position etc., Then it will show up and you can finetune it.

Chris S. Richardson said...

Vin,

Thanks so much for sorting my coding out, very much appreciated.

Chris S Richardson

Manda said...

it didn't work for me either and I did it all it's just still black and I refreshed the cache thing too....any ideas

heres the url to my blog
http://hellogoodbyefans.blogspot.com

Vin said...

Manda,

Change your background to white so you can get a better idea. Use this code :

body {background:#fff;
background-image: url(http://i146.photobucket.com/albums/r251/lidlbaby12/blogbkg.jpg);
background-repeat:repeat;
background-attachment: scroll;
margin:0;
color:#ffb7e7;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;font-size:small;font-size: small;
text-align: center;
}

Also enclose the picture url within brackets, and make it to repeat.

Christina said...

Thanks for the help. How do I get the part of the blog behind the main text white, but keep the tiled background there? I want a block of white beneath my main text all the way down the center of the blog. Thank you!

christina
http://lovebiscuits.blogspot.com/

Vin said...

Christina,

Your posts column is text on a white background! Try clearing the cache. See :

Clear Cache.

Use Firefox browser.

Ginger Gargoyle said...

tried to update the background as you have it written with a photo in my google photo album but I keep getting this error:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Attribute name "xt" associated with an element type "data:post.oldestLinkTe" must be followed by the ' = ' character

adding the extra test is all I did to my template. Two things are possible in my mind== a.should I be replacing the () with <>side carrots instead. or b.should I not be using the url from the photobook page but by clicking the photo itself and get that url--or possibly pulling up the html for the entry containing the photo to find the photo. or is it a different issue?
Thanks for any help.

Vin said...

Ginger Gargoyle,

Have a look at first part of this post :

Transparent Background for Blogs.

Also you are correct about clicking the photo to get the url.

fubbleblop said...

hi!

i tried following your ways.
but u see i recently changed my blog layout.
i generated my own
but i dont have a background picture in it.
and its a bit plain
so i followed your steps.
but no picture is cuming out when i preview it!
:(

Vin said...

Fubbleblop,

What is your blog address? Also see first part of this post :

Transparent Backgrounds for Blogs.

`honey.sugar.bangs said...

its uhh..
kirs92.blogspot.com

do help me! im kinda blur with all this things. but i dont like my blog to be super duper plaiiinnn.
gah. headache ! x)

fubbleblop said...

kirs92.blogspot.com

do help me!

i love editing profiles n stuff like in myspace and friendster etc etc. but when it cums to blogs.
im blank. i dont understand at all!
:(


my blog is boring now :(

Vin said...

Honey Sugar Bangs,

This is the code I see now in the body section of the CSS :

background-repeat: no-repeat ;
background-position: left bottom;
background-image: url(http://kirs92.blogspot.com);
background-attachment:fixed

First you need to upload your picture to a free host and get it's link.

Then paste that link in the body part of your CSS template like this :

body {
background-repeat: no-repeat ;
background-image: url(LINK_OF_IMAGE);
background-attachment:fixed;
}

Right now you have put blog url where image url should be.

`honey.sugar.bangs said...

thnx! now i get it xD

oh how do you make the picture scroll when u scroll up n down your blog?
now its at fixed.
i tried changing it to scroll
but it didn workk

Vin said...

Honey Sugar Bangs,

Remember to clear cache after saving any changes.

`honey.sugar.bangs said...

but its not working?
i cleared my cache already. refresh after i did that.
and its still the same.
the code thingie in my edit html i put scroll
instead of fixed.
is that wrong?

Vin said...

honey.sugar.bangs,

You forgot a semicolon after the word scroll like this :

background-attachment:scroll;

Rene Ylanan said...

Thansk very much! Thsi was very helpful!

Kev said...

Hi Vin,

I love this site. Great for newbies like me. I used your advice on inserting a background pic and moved it to the bottom of my posts. Your advice worked perfectly. Only thing I'd like to do now is be able to keep it stationary. Everytime I open or close the blog archive the pic shifts up and down. I would like to have it stay stationary at the bottom of my posts always and/or be flexible to my post lengths and stay at a certain location all the time. Is this possible? Thanks for your help.
Kev

Vin said...

Kev,

You have to add this line :

background-position:120% 10%;

below the picture link code line you have pasted in the CSS part of the template. Play with the percentages. Use Preview. You can also use :

background-position:bottom right;

`honey.sugar.bangs said...

OH thank you so much fr your help!! :))

Juju said...

thanks so much for your blog/help!!
i've been trying to change my background for weeks, but than I found your blog, and I did it in 2 minutes!!

Anonymous said...

Hello! I need your expertise! :)

My blog site is www.klceve.blogspot.com.

My problem here is that I want my background to fix and my text to scroll. I did what you ask to do but didn't work.

Please help!

Thanks!

Vin said...

Anonymous,

I do not see a background picture except in the header! Try going over the instructions again.

Nikki said...

HI. I followed all instructions including clearing cache and either I'm not clearing it right or it's just not working. Could you help??? Please ???

jnd3boyz.blogspot.com

Vin said...

Nikki,

Right now your code is :

body background-image:url(http://jnd3boyz.blogspot.com/<a href="http://picasaweb.google.com/jnd3boyz/Boyz/photo#5185211061452283090"><img src="http://lh4.google.com/jnd3boyz/R_WR_OtKHNI/AAAAAAAAAUE/JzARuFPUq7g/s144/Family%206.jpg" /></a>);
background-repeat:no-repeat;
background-position:120% 10%;
background-attachment: scroll;{
background:#000000;
margin:0;
color:#cccccc;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

FIRST UPLOAD IMAGE TO PHOTOBUCKET.COM and use the link from there in this code :

body {
background: url(LINK_OF_IMAGE);
background-repeat:no-repeat;
background-attachment:scroll;
margin:0;
color:#cccccc;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Note : The link will begin with http:// and not with <a href....

DBZ Lover said...

Hi

This Is My Blog
www.dragonballfanssite.blogspot.com

I Wanted To Inform U That I Have Some Problems Related to Blogging
I Have Added A Background To My Page
And I Wanted It To Cover In The Whole Screen(I have a 17inch monitor)

I Have Added The Background Like This

body {
background:$bgcolor;
background-image:url("http://i266.photobucket.com/albums/ii271/prateekkathal/AnimePaperwallpapers_Dragon-Ball-Z_.jpg");
background-position:center center;
background-repeat:repeat;
background-attachment:fixed;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

So Can U Tell Me What To Do As The Wallpaper Is Not Like I Wanted
I Have Seen What U Have Written In Your Blog site But The One I Have IS Better But I Don't Know How To Make The Size Of The Background Fit to Screen.
I Tried What U Have tried everything that u wrote it here http://betabloggerfordummies.blogspot.com/2006/11/how-to-add-picture-to-background.html

But that all went wrong(i mean i did not fit to page no matter how much i tried)


PLS TELL ME WHAT TO DO AS SOON AS POSSIBLE
PLSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS

Vin said...

DBZ Lover,

The size of your picture is 920 pixels. So to fit the screen it depends on what is resolution of your monitor. Go to Display Properties---->Settings and check.

noemi said...

Hello Vin,

I did everything the way you described, so now I have a nice background :). But only in firefox. I don't use IE, but I checked to see if the blog looked any different there (it does, the fonts are all ugly and the whole thing is not as pretty as with firefox...), and much to my surprise, it won't display my background! So what do I do?

Thanks!

Vin said...

Noemi,

It would not be possible to comment without taking a look at your blog!! If you wish you can leave a blog address!

lionheart23 said...

Need help
my blog:
http://lionheart23.blogspot.com/

It doens't shows any background picture, I've follow the step.....><"

here's my coding

body {
background:#C8BBBE;
background-image:url(http://img301.imageshack.us/img301/5730/30498873im7.jpg)
background-repeat:no-repeat;
background-position:120% 10%;
background-attachment: fixed;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

None of background picture is showing.........help~!!

Vin said...

Lionheart23,

You forgot to add a ; at the end of your

background-image:url(..);

line like above.

Igor "Haesuse" Omerbegovic said...

Vin,
Listen i might have read this whole thing wrong, but i am trying to competelly replace the current bg. I am using the dots template and i am hoping to be able to replace it with my own made backgrounds. Most probably they will be pictures, but if you can fill me in on how to either change the bg to just one color and how to change the current background to something completely else i would really appriciate it!

Also i did read you post on tiling and transparency, but i do not want the tiles, i just want one solid image if possible!

thanks in advance!

Vin said...

Igor "Haesuse" Omerbegovic,

Do you have your image ready?

If so upload it to a free host and copy down the link of it.

That is the first step.

Gayl said...

I've tried the steps here and I have cleared the cache but my image still doesn't show up in the background. this apply to beta blogger as well? Are there certain templates this won't work on?

Vin said...

Gayl,

Have a look at first part of this post :

Transparent Background for Blogs.

Girl Interrupted said...

This is my code:

body {
background:$bgcolor;
background-image:url("http://ecstaticbitch.glogster.com/Girl-Interrupted/");
background-repeat:no-repeat;
background-position:120% 10%;
background-attachment: scroll;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

But it's not showing the background pic, only showing a blank white background. The link works normally but not in the html - what am I doin wrong?

Vin said...

Girl Interrupted,

This is not a link to a picture :

http://ecstaticbitch.glogster.com/Girl-Interrupted/

Have a look at How to Upload files to free hosting?

Lindsay Miller said...

Thanks for this great site will all of the tips...now if I could just get them to work for me. I am following the exact instructions to add a picture to my background. I have just a small tile, so I am trying to make it tile all over the background. I have done everything and cleared cache, etc. I get nothing but a white background. What am I missing??

Vin said...

Lindsay Miller,

This is the code you should use :

body {
background-image:url("http://i294.photobucket.com/albums/mm110/Junelindsay/BlogTile.jpg");
background-repeat:repeat;
...
...
}

Lindsay Miller said...

Thank you! I worked!

Lindsay Miller said...

Sorry...one more question. Now that I have added the background picture, it covers the entire page. How do I define the header, body, siebar etc. in just white or something so it is a white block over the background?

Vin said...

Lindsay Miller,

Look for :

#outer-wrapper {
width: 660px;
background:#fff;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Add the background line to it. Preview and save.

Eric said...

Vin~

I am working on DH's blog and there is a big white space at the bottom of the background (which I only see on a PC, not my Mac). What am I doing wrong?

My code is~
body {
background: $bgColor;
background-image:url(http://emosher.googlepages.com/LASstripes.jpg);
background-repeat:repeat-x;
background-position:120% 10%;
background-attachment: fixed;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}

Thanks for your great tutorials!

Diana

Vin said...

Eric,

Please supply the blog address so we can check it out!

Eric said...

Oops!

las-go-around.blogspot.com

Vin said...

Eric,

I do not see it. Which browser are you using? Can you send link of a screenshot?

Eric said...

I think it might be a monitor resolution thing. Some people see it, some don't. It's still aggravating. Here are links to 2~
http://tinyurl.com/5u8gpx
http://tinyurl.com/5hapl6

Vin said...

Eric,

Which browser? I do not see it in Firefox2!

Eric said...

Vin,

I figured out the problem. I changed the size of the background image and it is fine now. Strange is that was not like that until this week. I never saw it on Firefox or Safari on my Mac, but it did show up with IE on a PC (large monitor!)

Thanks for this site!!

Timothy said...

What do you mean sigh into dashboard????

Vin said...

Timothy,

Login at Blogger.com and if it is successful you will have signed into Dashboard.

The Blogger Dashboard is the page which opens on a successfull sign in (login).

Bhargav said...

hey vin,i dont find the code u given in my blog....."www.vanguards4u.blogspot.com"....jus check it out

Vin said...

Bhargav,

Since it is a private blog I am unable to check it out! :-(

Linda said...

This was most helpful. Even for some one like me who is not all the blogger/computer savvy I think I can follow this.

Bhargav said...

hey vin,i did as u said....but i am not getting it...i even refreshed my page.....
www.iare-ece.blogspot.com

Vin said...

Bhargav,

Instead of this code :

body {
background: #fff;
background-image:url(http://i284.photobucket.com/albums/ll36/bhargav325/imagegopal.jpg);
background-repeat:no-repeat;
background-position:120% 10%;
background-attachment: scroll;
...
}

Use this code :

body {
background: #fff;
background-image:url(http://i284.photobucket.com/albums/ll36/bhargav325/imagegopal.jpg);
background-repeat:repeat;
....
....
}

Sharon said...

I have found this site to be very helpful but I am having no luck changing the background on my blog...I believe I have followed instructions but no luck yet. Can you help? Thanks, Sharon

Vin said...

Sharon,

In your Template Code box scroll down to this code :

body {
background: #ffe6b3;
background-image:http://drsharonc.googlepages.com/fireworks2.jpg
background-repeat:
background position: 120% 10%
background-attachment:scroll
...
}

and change it to :

body {
background: #ffe6b3;
background-image:url("http://drsharonc.googlepages.com/fireworks2.jpg");
background-repeat:repeat;
...
}

Preview and save.

Amanda Robbins said...

I am trying to add a floating image to the left of the header, relative to the header I guess if that makes sense. I would like it overlapping the left side of the header a bit. Help please?

Vin said...

Amanda Robbins,

Have a look at Header picture to left of Title.

Zena said...

I hate the change. I don't know how to do this. I don't understand why you changed changing the background image of my page to css. Isn't there an easier way to change my background image?????? Thanks.

Zena said...

Now my page is all screwed up. What can I do to at LEAST change it back? ThXs. Zena

Vin said...

Zena,

You have added code to the main-wrap :

#main-wrap2 {
float:left;
width:100%;
background:url("http://zenaprincess.googlepages.com/wt.jpg") no-repeat left top;
....
}

Add it to header-wrapper instead :

#header-wrapper {
background:url("http://zenaprincess.googlepages.com/wt.jpg") no-repeat left top;
...
}

embryo shrines~~ said...

vin, thx for sharing

it really helps me a lot

Chris.KL said...

THANK YOU SO MUCH!!! It really helped out alot! Much appreciation :-)

Roxie said...

Hi!

I've followed your directions and after many attempts, I can't seem to get my code right.

I really could use your help!!

www.roxiesphotojournal.com

Vin said...

Roxie,

I do not see the code modified anywhere! Where have you added the image link in the template?

Eric & Andrea Taylor said...

I tried the steps and I still can't get the background image to be repeated vertically on the left hand side. Any help you can provide will be appreciated. Thanks in advanced.

ericandreataylor.blogspot.com

Vin said...

Eric & Andrea Taylor,

I can see it very well! Try clearing the cache.

katgreen said...

Thanks for the info! I have played around with adding pictures to the background and although I have not found anything I really like yet at least now I know how to do it! I also used the help you gave about how to make the body of the blog larger. It is awesome that you really seem to care about the info you give out and answer questions! Your instructions are so easy to follow. Is there any sort of copyright rule I will break if I add my own background to the Minima template?
Inda really?

Vin said...

katgreen,

Adding your own background picture will not break any rule.

Mohammad Mustafa Ahmedzai said...

Man I would simply say " Hats off to you"

Savita said...

Can you tell me how I can show all my previous posts in my "previous posts" section the way it is seen in the new blogger... I am not changing to new blogger because I wanted the old changes... can I just change the html code and show all the previous posts..
please mail savita.ke@gmail.com

Vin said...

Savita,

Convert your blog feed URL to Javascript code to add content with RSS feeds to show your post titles.

To show all your post titles use this feed url :

http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999

Replace the CAPS.

Thirty-Fiver said...

I just tried combining a bunch of my pictures as one and when I uploaded the collage it was extremely zoomed in. Do you know what could causing this, as well?

Thanks again.

Vin said...

Thirty-Fiver,

What is the link of your image?

Thirty-Fiver said...

Vin

http://coleminestudios.googlepages.com/Page_1.jpg

Vin said...

Thirty-Fiver,

I don't see it on your blog!

Thirty-Fiver said...

You don't see the picture or you don't see the picture on my blog? The picture isn't on my blog because I took it off. It was way too big. The link I sent should be a collage of pics.

Thirty-Fiver said...

If you don't know what is causing the 'zoom', would you explain how I add 'divs', I think it's called, so I can add multiple pictures to the background?

Sorry for the confusion and I appreciate the help.

Vin said...

Thirty-fiver,

You have to think and plan this carefully. The background is the part on both sides of your blog which is not covered by the posts and the sidebar column.

If you want a large width picture to show here you can decrease the width of the blog.

It also depends on the resolution width of your monitor. Since pictures do not change according to monitor width what looks good on your monitor may look bad (whole picture may not be seen) on smaller resolution monitors.

Another trick you can use is to show the picture through the posts by using a transparent background effect.

You can also decrease the width of the picture in an image editor program on your PC to make it fit in the narrow background strips.

Thirty-Fiver said...

Thank you for clearing that up for me. I'll try to figure it out. What I was originally going for was two columns, one on each side of the blog, of pictures. I didn't really want the whole background covered; just some pictures laid out like a border of sorts.

Vin said...

Thirty-Fiver,

You will have to create a picture in an image editor with a central white column flanked by two columns containing your pictures stacked vertically. Width of picture should be the width of the blog.

Then put that picture in background as shown in post above.

Hassan said...

Hey vin, i want to add three images as a background in content wrapper, as u've said above, for that one has to add divs in the css... can u please explain how to do that?

thanks

Vin said...

Hasan,

Perhaps you need to read my comments more carefully! :-)

Hassan said...

I read all the comments again. the problem is that i cant join them as one image... look at this: http://testbloggertemp.blogspot.com/...

i started as a noob and learned many things trying to make this design, but this is the only thing i can't figure out, i want to put another 2 images on content wrapper (middle part)- one image is: http://www.imageshare.web.id/images/96zn7fhytzm2rup7o45y.jpg... i want to put it on the top of content wrapper...

Thank you

Hassan said...

Hello Vin,

i figured it out, i added tr-td html thingy on template layout and it worked...

ur blog is a great help, thanks

Anonymous said...

trying to tile an image and I'm getting this message: Invalid variable declaration in page skin: Variable is used but not defined. Input: bgcolor

Vin said...

Anonymous,

AT the top of your template is the "Variable definitions" section. You have to define bgcolor in it with this code :

<Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#ffffff">

Vin said...

Anonymous,

AT the top of your template is the "Variable definitions" section. You have to define bgcolor in it with this code :

<Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#ffffff">

Raymundo said...

Hi Vin, listen, I've read a thousand time the tutorial and I've been trying to add the picture to the background, but I simply can't seem to get it right. Most of the times nothing changes with the background, sometimes the background turns right. I don't know what to do...

This is my blog's url:

http://lacovachaaudiovisual.blogspot.com/

And this is the image I'm trying to add to the background:

http://picasaweb.google.com/antonio.mendozab/LaCovachaAudiovisual?authkey=IBE2T-uwAuo#5244705067683594450

Thank you a lot. That's a cool site you have, it's been quite helpful, seriously.

Vin said...

Raymundo,

In Picasa to get the link of the picture you have to right click the picture an choose "View Image" and then copy the URL in the address bar.

In this case it is :

http://lh5.ggpht.com/antonio.mendozab/SMjveK74wNI/AAAAAAAAANk/qzq4a13M8rs/s288/CovachaAudiovisual-fondo.jpg

The above link is correct as it ends in the filename and format (jpg).

Raymundo said...

Wow, you have been really helpful, I officially love you, lol. Just one more question. What do I have to do with the code to tile the image both vertically and horizontally, I did't quite get how to do that.

Vin said...

Raymundo,

Put in the repeat line as shown in above post :

background-repeat:repeat;

freakyparo said...

Hey!!

If you know so much about background images on blogspot, why isn't there any background image on your blogspot???

http://wordsmithsorority.blogspot.com

Vin said...

freakyparo,

LOL! Surely that is a matter of choice and/or design. Besides this blog has a stretch template which matches the monitor width. If I put in a picture 95% of it won't be seen!!

Alexander said...

Thank you very much for this tutorial! It was really helpful. :)
Cheers
//Alexander

al & y said...

Hi Vin,

Thank you very much for this very helpful blog of yours!
I have successfully change the background of my blog .. BUT .. now the page elements (blog, achives etc..) no longer have rounded borders.. well .. the rounded borders are still here but a square line appeared right behing it .. I don't know what to do .. please help me!! ;-)
Aly

al & y said...

ok ... it's going from bad to worst .. my background image disappeared !!! I changed nothing (I even reverted to a previous html model).. but I don't know why (and how) the image disappered !! (my image is hosted on a google site)
my background image is coded as follow :
body {
background:#ccc;
margin:0;
text-align:center;
line-height: 1.5em;
font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;
background-image:url(http://sites.google.com/site/fropatoto/Home/classeur/Fond-de-page.jpg?attredirects=0);
background-repeat:no-repeat;
background-position:40% 0%;
background-attachment: fixed;
}
PLEASE HELP !!! ;-)
thanks !!

Vin said...

al & y,

Upload your image to Photobucket.com and use the link from there.

AL et Y said...

Thank you Vin, it seems that hosting my image on googlesites was not a good idea!

Pranjal said...

hiya vin
i am having some troublez regarding the background image in my blog. i just cant get the image in there even though i tried ur part of the css coding
i wana ask a real favor of you, can you become a mod in my blog?

Vin said...

Pranjal,

What is the blog address?

Anne said...

awesome advice, my blog is now perfect!! many thanks :)

femka said...

hmmmm.... I can't get it to work! I did everything, except instead of putting the image on google pages I put it on photobucket because google pages wasnt letting any new members, and I have no idea what in the heck "refresh cache" means, I looked all over the stupid html page and i can't find anything that says refresh cache, or anything with cache for that matter.

Vin said...

femka,

You have to use the direct link of your image :

http://i207.photobucket.com/albums/bb134/kittilia/swirl-border-vector-ist2_1261487.jpg

Use this code :

body {
margin:0;
color:#cccccc;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-image:url(http://i207.photobucket.com/albums/bb134/kittilia/swirl-border-vector-ist2_1261487.jpg);
}

LaLuna said...

Hi!

ive tried your instructions as well, it doesnt seem to be working.

my blog is: www.laluna13.blogspot.com

help?

Thanks

Vin said...

LaLuna,

Delete this line in the code :

background-position:-840% 60%;

Janet said...

Hi Vin,

It's great that you're willing to help us out like this. Thanks.

I'm a complete beginner, and I'm looking for a way to use a format very similar to this blog: http://www.thematches.com/blog/

Basically two background images; one that tiles downward and one that stays at top center, creating what looks like a header image that expands into the side margins.

Problem is, simply copying/pasting that blog's source code into my 'Edit HTML' box results in error. If you could tell me how to do this properly, it would be easiest for me since I could just change out the image urls.

I've also tried modifying the code for Blogger's standard template Minima Black, and couldn't get the same result.

Feel free to reply to me by comment or by e-mail: janethwu@stanford.edu

Many thanks,
Janet

Vin said...

Janet,

Source code and template code are two totally different things. You cannot cross one with the other.

Secondly that blog uses a Classic template which is different from Layouts.

You will have to create a div spanning the top and give it a background image as shown in above post. Or increase width of the header to span full width.

Janet said...

I finally got it to look the way I wanted! Thanks Vin, you're awesome.

-Flickzzz- said...

hey Vin!
This is very useful post. But I have almost the same question as Janet, but I didn't find the answer to that.
I want to put two background images. One stays on top left, and the other is located on top right and repeats vertically. Is there a way to do this? I tried like this:
background-image: url(IMAGE URL);
background-repeat: no-repeat;
background-position: top left;
background-image: url(IMAGE URL);
background-repeat: repeat-x;
background-position: top right;
margin:0;
text-align:center;
line-height: 1.5em;
font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;

but only one image showed at once. I hope you will help

Vin said...

-Flickzzz-,

Any section can have only one background parameter. It is like wearing two shirts - only the top one will show.

You have to create a separate section in the template to hold the other picture.

... said...

Vin
Great Blog thank you for your help
This is my blog

http://megankylejackson.blogspot.com/

I want this image to be my backgroung

http://i111.photobucket.com/albums/n148/kylemartin105/newbackground.jpg

I can not get the image to stretch from the left to the right. I can get it to show on the left, but it is white on the right.
is there a stretch code or full image code

I tried to mess with the numbers of 120% 20% negative and positive. I have tried the center center and I have tried to write in full full

can you help me please?

Vin said...

... ,

It depends on resolution (width) of your monitor. Check it out in Control Panel----->Display Properties---->Settings.

You have to make the picture width same as width of your monitor.

... said...

Vin
Is there a code to allow my header to show no background color? I just want the background to image to show through the header but the header color is in blocking it.
THANKS

Vin said...

... ,

Try the Transparent Background method.

Helen said...

Thanks ever so much for all your help so far. People can now leave comments on my blog. Don't ask me what widgets have to do with comments but I don't really care as long as it works hehehe. Anyway, I tried to use googlepages to add an image as a background instead of a flat colour but it seems they have stopped usuing goodlepages and have replaced it with googlesites for new users. Are there are any instructions on how to do this using googlesites?
Thanks

charli. said...

hey vin,

i tried do this several times using the 'direct link' on images i found in photobucket. but it doesn't seem to work.

my code looks like this:
body {
background:$bgcolor;background-image:url(http://i415.photobucket.com/albums/pp237/shOMai06/thcute-2.png);
background-repeat:no-repeat;
background-position:120% 10%;
background-attachment: scroll;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

is there anything wrong?

- charli.

Vin said...

charli.,

Delete this line :

background-position:120% 10%;

and preview.

Leslie said...

thanks for all you do ~ I got my image fixed, got it over to the left and no matter what size I make my image in photoshop, the size doesn't change in the background! I always had a white border around it, and now I have it aligned to the top & left, but the image still doesn't take up the space. Help! What size should I make it? Here's the code I have up:

body {
background:$bgcolor;
background-image:url(http://i246.photobucket.com/albums/gg107/graygirl73/72dpitrial2.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Vin said...

Leslie,

What is the blog address? Also monitor resolution matters! Start---->Control Panel--->Display Properties--->Settings Tab lower left.

Emily P said...

Hi, I'm having problems with my picture. I used the rules you put in, but the horizontal block only covers one part of my blog! Here's my code:
body {
background-image:url(http://farm2.static.flickr.com/1174/549201506_1f51c32a71.jpg);
background-repeat:repeat-x;
background-position:120% 10%;
background-attachment: scroll;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Vin said...

Emily P,

Check out the first part of How to Add Transparent Background to Blogs?

James Parker said...

My blog is http://thepatriotpulpit.blogspot.com/

I want to be able to increase the image size so that the stars and stripes do not run into the text in the center. I want all the text on the "parchment" section. Resizing the background image will solve the problem. Here's the code I am using:

body {
background:$bgcolor;
background-image:url(http://i14.photobucket.com/albums/a350/holyhabanero/patriotic-flag.jpg);
background-repeat:repeat-y;
background-position:center center;
background-attachment: fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

What do you recommend?

Vin said...

James Parker,

Decrease the width of the outer-wrapper so that it fits within the parchment column :

#outer-wrapper {
width: 800px;
...
}

Ysabel said...

Please help me with my blog, I don't know anything about that, I wanna use this template http://countrygraphicsclub.com/clubfree/cgi-bin/mixnmatch1.cgi and they say to I need to use this code to set up the pages
I tried to paste the code, but I can't post this comment

I don't have any idea how I need to do with this, please explain meeee....THANKS!!!

Vin said...

Ysabel,

I cannot go to the link you gave as it asks for password!

Cybers said...

LOOKING THIS SITE HEHEHE :D

web development company said...

Simply saying Vin Thanks for your post.

Romeo Valantinos said...

Hi
I wonder how to insert picture just on the border of the out wrapper ! I didn’t find any article in the net about this section of the blog!
I tried many methods, but nothing work, even when I successes to put it after the body } it hid the navigation bar in my blog.
Please take a look on my blog, the dark gray border I mean und not on the header “ on the header it will hide the red navibar” Almost 2 weeks trying to fix the problem! This is My blog (I don't know if I can insert hyperlink) if not please tell me how to send you my blog URL, PLEASE HELP ;)
Romeo Valantinos

prépresse said...

Really a great post.I liked it and i will share it with others too.

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.