Spread the Word

Site Feed



Powered by FeedBlitz

Subscribe with ...

  • Add this blog to my Technorati Favorites!
  • Subscribe in Bloglines
  • Subscribe in NewsGator Online
  • Subscribe in Rojo
  • Add Random 

Bytes (WebLens Blog) to Newsburst from CNET News.com
  • Add to Google
  • Add to My AOL
  • Subscribe in FeedLounge
  • Add to netvibes

Translate This Post

Burn a Feed

Ping the World

Friday, January 06, 2006

Blogger Template Hacks: Background Graphics

In an earlier post, I mentioned making some changes to the default Blogger template. I deliberately chose a plain vanilla template because I wanted an easy-to-read blog with a clean look and feel. However, it only takes seconds to juice it up a bit with a background graphic or two. I added the green mouse image that you see here to provide visual continuity with WebLens, to which this blog links heavily.

Fix: Here's the code I used to tweak the Blogger template:

  1. Open the Blogger template and find the CSS for the Body tag

  2. Between the opening { and closing } parentheses, add the following code:

    background-image: url(http://your-domain-and-filename);
    background-position: 140% 0%;
    background-attachment: scroll;
    background-repeat: no-repeat;
Experiment with the background positioning until your image is positioned where you want. The first figure (140%) controls horizontal placement. The second, vertical. Negative percentages will move the image up or to the left, in relation to the containing element. The repeat attribute controls tiling.

Hope you find this fix helpful. Stay tuned for more. Even better, subscribe to my feed and get more on this topic automatically.

24 comments:

kdsmooth said...

Thanks for the info it worked great. Question....can more than one image be used on the page? and if so what would have to be added to the html code to do this?

Pam said...

Glad to be of help. And yes, you can have as many images as you want on a page. You would just add the style formatting used for the BODY tag to other tags, offset vertically and horizontally as desired. You can add it to SPANs and DIVs for precise placement, or to H1, H2, etc. for graphical headings. (The latter technique, called Fahrner Image Replacement, has some accessibility implications that I will be getting into when I write about putting images in your header.) See the CSS resources at WebLens for tutorials. ZenGarden is great for a sense of the visually rich design that's possible with CSS.

Knitted_Painting said...

It won't work on my blog for some reason... this is what I typed in:

body {
background:#000;
margin:0;
padding:40px 20px;
font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
text-align:center;
color:#A5FF7D;
font-size/* */:/**/small;
font-size: /**/small;
background-image: http://img87.imageshack.us/my.php?image=backgroundartnew5vv.jpg;
background-position: 140% 0%;
background-attachment: scroll;
background-repeat: no-repeat;

}
did I do something wrong?

Pam said...

Yes, you've got a minor error in your code. The line that references the image location is missing the prefix "URL". It should look like this:

background-image: url(http://your-domain-and-filename);

You may also need to experiment with the horizontal position (currently 140%) as your blog layout is quite different from mine.

Hope this helps.

Knitted_Painting said...

Yes it helped alot thank you so much!

I also tried to put up a second small background image to put above the one I have now, to fill in the empty left side of my blog, but it doens't work so I'm guessing you can only put up one background image?

Pam said...

Yes, that's right. At least only one image attached to the main body background. There's nothing to stop you, though, from attaching images to other styles throughout your template, including headings, etc.

If you want to position an image all by itself, with no accompanying content, you would need to create a DIV to contain it.

Knitted_Painting said...

What is a DIV (sorry I'm new to all this)? I just want to put up and image on the left side of my blog because it's all empty and too black all together, but I really wouldn't know where to put it.

Pam said...

A DIV is an HTML container you can put anywhere. They're useful because you can attach styles to them and because they can contain other tags. This is a little much to explain in a blog comment. Suggest you check out the CSS tutorials listed on my WebLens web design page.

. . . . . said...

Thank you! I was having all kinds of trouble and you were the only one I could find who actually helped me.

Pam said...

You're welcome :-)

Space Dog said...

I still can't seem to get the background to work? the background image shows up if i paste that url into my brower so not sure why it doesnt appear in the blog itself?

does it now show up in the preview mode?

thanks for the help!!!

this is my code:

body {
background:url("http://bp0.blogger.com/_SbPnB0_FrAM/RcOvFsNV5SI/AAAAAAAAAA8/7at7_aHR1ww/s1600-h/background.jpg");
background-position: 140% 0%;
background:#000;
margin:0;
padding:40px 20px;
font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
text-align:center;
color:#ccc;
font-size/* */:/**/small;
font-size: /**/small;
}

Yi Jun said...

thank you very much for the codes!

cr said...

Dear pam,

I tried your tip but it doesn't seam to work, it only gives me a black background. I am really new at HTML so i dont know what i did wrong.
this is how the code looks now:
body {
margin: 0;
text-align: center;
min-width: 760px;
background: #000;
color: $textColor;
font-size: small;
background-image: url(http://bp2.blogger.com/_gtEhi5nznmQ/RgBXAQTv_9I/AAAAAAAAAAM/Kjfg1FItOYo/s1600-h/Limbo2.jpg);
background-position: 260% 130%;
background-attachment: scroll;
background-repeat: repeat;
}

Thank you a lot

H K said...

Pam, thanks for this.
I will have to investigate more of your site and ways to modify the template (I am also new to this).

Though I have one question about the background image. It works for me, but stays at the top of the page.

I thought the line:
background-attachment: scroll;
would mean the picture scrolls with the screen. Is there a way to make the picture scroll? Or do I have something wrong?

Here is my code (editing the minima template):
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-image: url(http://www.geocities.com/hughkemeny/forrest.jpg);
background-position: 0% 0%;
background-attachment: scroll;
background-repeat: no-repeat;
}

Pam said...

Hey Yippy, you're welcome :-)

Pam said...

Hi Spacedog,
Try changing your code to say background-image. Not sure if that's the problem or not.

Pam said...

Hi CR,
Sorry, I'm afraid I'm truly mystified. I've tested your code snippet and it doesn't work for me either. It works when I substitute my own graphic reference, so I think it must be something to do with the Blogger URL.

Pam said...

Hi HK,
Yes, it's exactly the opposite of what you'd expect. You have to say background-attachment:fixed to get the background to scroll with the foreground.

Mara said...

Thank you for all of the tips, they are some of the clearest and well writen I have found!

I can add the image but is seems to small as I get a white border around it. What size should I make the photo to get it to take up the entire screen?

Crystal said...

Pam I am new to this blogging and using your 3 column widget template. I want to add a back ground image but unsure where to put the code in. Could you please help? Thanks for your time!
Crystal

Dennis said...

Hey Pam, Guess what... YOU THE BEST!!!

THANK YOU VERY MUCH...

Try check out my Blog's Background.

It fit because of your information

Thanks a lot Pam...

Anonymous said...

[…]This may seem like an extremely stupid question, but I am really very new to Linux so please bear with me.[…]

Lu, Poppies Blooming said...

Not sure if you still answer questions... but I tried this:


body { background-image:$bgcolor url(http://3.bp.blogspot.com/_Te3duNHzHNQ/SR9mts3zpoI/AAAAAAAABLk/l55L1-Rfgt4/s1600-h/poppiesblooming.jpg)
background-position: 140% 0%;
background-repeat: no-repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}background-attachment: fixed }

But the background image doesn't appear at all. Its the minima background (i think) and it just shows up white. I'm sure something's wrong - but not a clue what

Miss said...

hey !
how to find the CSS for the Body
tag ?
I really don't understand .
can you demo me please ?