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.
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 the image vertically (top to bottom):
No image repeat:
Repeat both vertically and horizontally:
Position image to the left or right:
or right (for right side) |
Position image to center of screen:
Fix image on background (to prevent image from moving when scrolling):
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:
8)
thank a lot
Oh My Goodness! THANK YOU!
How can I do sidebar images?
This has been an event of patience and heavy breathing!
@Pirate Dixie:
you can add images with the "HTML/JavaScript" gadget and include this code (without the *) :
<*img src="IMAGE LINK">
that's all.
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????
Thanks a ton B
@Nicola:
The URL might be wrong. All photo URLs should end with .jpg or other image extensions.
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¤t=blogbkgrdcopy-1.jpg);
Grrrrhhh... help please! thanks
@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. =)
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
@heidilayramay:
The code seems fine. Try ignoring the "repeat-x" at the end since the image is small. =)
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?
@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. =)
thanks a million!
Thanks a lot
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.
@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.
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;
}
@me:
Remove the ?t=1271452846 at the back of the link and it will work.
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!
hi i wan to ask~ when i scroll the image behind is fixed, how to change that?
Thanks, that worked. Now, I'm wondering how to make it take up the whole background?
Thanks. I have the backgroudn working now, but I have it on repeat, is there anyway to make it take up the whole page?
@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.
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!
@_:
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.
You're a legend mate, thank you x
how to make the picture repeat on left to right and top to bottom?
@Su Yin:
Don't include any "repeat" then, it'll repeat both horizontally and vertically.
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!
@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
ok sorry but I just can't find the ".content-inner" in my code? grrhhh :(
@IVYALLOVER:
since you're using the default blogger template, you should search for #outer-wrapper.
add: background: #FFFFFF;
i'm using the 'minima black' template.
how can i change the background but keep the background under the main body as IVYALLOVVER?
@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.
Thank you VERY much for the tutorial.
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?
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?
@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.
You were right...I had the code in the wrong place. Thank you so much!
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
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!
@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...
ogey, thanks alot ken! ^^
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)
}
@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;
thank you!
http://chaoticdesolation.blogspot.com
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
@The conscienne:
You should find the body { section. The instructions are written above.
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?
@TrueAyat:
Font colours can be changed at Design > Template Designer. Date and time can be changed under Settings. =)
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!
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...
Tra & Sten:
The "background:" line has error. Use this instead.
background: #FFFFFF url(http://img832.imageshack.us/img832/8683/cement.jpg) fixed;
I still do not know how to change my Blog back gurond in HTML... I need help please
Clara:
This tutorial is pretty straight-forward. If you can't, get a friend to help you. All the best.
thanks for your help with the fixed background image!
I’m a big fan of this blog and I check it regularly. Keep up the great work!
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! :)
@Lara Johnson:
You'll need to copy + paste the whole code into the white space (aka "Content") after you clicked the "HTML/JavaScript" gadget.
Thanks for these tips. I am new to blogging, so they will surely come handy.
George
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
@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.
I'm trying to add this pic:
http://s1209.photobucket.com/albums/cc394/PookiePorkChops/?action=view¤t=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!
@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.
thanx pal. XD
nice tips.
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!
Thanks for the tips. It helped me a lot.
Very nyc sharing.. It works for me..
nice tutorial.
makasih ya mas :D
Post a Comment