Buying Domains

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Sunday, 7 June 2009

How To Change Blogger Background

Posted on 23:10 by Unknown
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!
Email ThisBlogThis!Share to XShare to Facebook
Posted in Customize - Background | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • Earning Nuffnang Glitterati Status
    In order to achieve Glitterati status in Nuffnang, one has to be loyal - in the sense that other Blog Advertising Companies' Ad Units (...
  • How to Remove Attribution Widget on Blogger
    How to remove attribution on Blogger? How to remove copyright widget on Blogspot? How to remove line at the bottom of blog? If you're us...
  • Facts About Google
    The Beast File: Google. Google and its dominance. Google is certainly popular and has ever increasing users from day to day. Here are some f...
  • Blogger in Draft - New Blogger Template Designer!
    A new template designer has been released on Blogger Draft offering new templates and features enhancement to allow easier modification of ...
  • Getting a Domain or a Web Hosting, or Both
    Difference between getting a domain or a web hosting, or both. Why purchase a custom domain name? Why purchase a web hosting? Can I just pur...
  • Guide to Using INNIT @ Nuffnang
    In order to fully utilize INNIT , the blog aggregator, by Nuffnang, you have to obtain Glitterati status first. Here's more or less the...
  • Neobux Payment Proof
    UPDATE 9 April 2011 : If you don't upgrade your NeoBux account and remains at an ordinary account, you'll only earn $0.001 per click...
  • OnBux Down Forever?
    Yes, OnBux is down for quite some time already and one could only wonder - was it intentionally done? Was the hard-clicked money earned by t...
  • Blogger Open Image with Lightbox
    How to open image with Lightbox on Blogger? How to open image with Lightbox on Blogspot? Show image with Lightbox on Blogger. Show image wit...
  • Blogger New Interface Layout
    Blogger has released a new layout on its Original Blogger site (note: not Blogger in Draft) and you can try the updated Blogger interface wi...

Categories

  • About.me
  • Advertisement
  • Alexa
  • Blog Signature
  • Blogger
  • Blogger in Draft
  • Blogger Template Designer
  • Bloggerunited
  • Comments
  • Customize - Background
  • Customize - Blog Width
  • Customize - Comments
  • Customize - Label
  • Customize - Others
  • Disqus
  • Domain
  • Earn Money Online
  • Facebook
  • Favicon
  • Feed
  • Feed Count
  • FeedBurner
  • Flavors.me
  • Flickr
  • Gaining Traffic
  • Google
  • Google Analytics
  • Google Page Rank
  • Google Webmaster
  • Gravatar
  • Guides
  • Imageshack
  • Intense Debate
  • JS-Kit
  • Lightbox
  • Links
  • NeoBux
  • Nuffnang
  • Onbux
  • One Stat
  • Photobucket
  • Photos
  • Picasa
  • Post Password
  • Posterous
  • Profile Page
  • Recent Posts
  • Refresh
  • Site Meter
  • Sitemap
  • Skydrive
  • Stat Counter
  • Statistics
  • Table
  • Templates
  • Tinypic
  • Top Commenters
  • Traffic
  • Tumblr
  • Twitter
  • Web Hosting
  • Widgets
  • Wordpress

Blog Archive

  • ►  2011 (12)
    • ►  October (1)
    • ►  September (1)
    • ►  August (1)
    • ►  July (2)
    • ►  June (2)
    • ►  May (1)
    • ►  April (1)
    • ►  March (1)
    • ►  February (1)
    • ►  January (1)
  • ►  2010 (29)
    • ►  December (4)
    • ►  October (1)
    • ►  September (5)
    • ►  August (3)
    • ►  July (2)
    • ►  June (1)
    • ►  May (5)
    • ►  April (3)
    • ►  March (5)
  • ▼  2009 (33)
    • ►  November (1)
    • ►  September (3)
    • ►  August (4)
    • ►  July (5)
    • ▼  June (10)
      • How To Generate Blog Traffic Instantly
      • How To Change Blogger Blog Width
      • How To Gain Traffic From Nuffnang
      • How To Open Links In New Window or Tab
      • Top Commenter Widget for Blogger Blogs
      • How To Replace Blogger Feed with Google FeedBurner
      • How To Change Blogger Background
      • Hack To Improve Blogger Label and Archive Pages
      • Remove "Showing post with label...show all posts"
      • Allocation of Nuffnang Advertisements
    • ►  May (10)
Powered by Blogger.

About Me

Unknown
View my complete profile