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:
- Open the Blogger template and find the CSS for the Body tag
- 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;
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:
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?
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.
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?
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.
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?
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.
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.
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.
Thank you! I was having all kinds of trouble and you were the only one I could find who actually helped me.
You're welcome :-)
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;
}
thank you very much for the codes!
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
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;
}
Hey Yippy, you're welcome :-)
Hi Spacedog,
Try changing your code to say background-image. Not sure if that's the problem or not.
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.
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.
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?
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
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...
[…]This may seem like an extremely stupid question, but I am really very new to Linux so please bear with me.[…]
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
hey !
how to find the CSS for the Body
tag ?
I really don't understand .
can you demo me please ?
Post a Comment