Skip to main content

Adding background image in Footer


Learn to add background images in footer and controlling it with CSS

One of my Orkut mate(αквαя:α яσcкѕтαя:) asked me this question that how do i add background image in the footer.This one is for you bro.
Adding background image to footer is same like adding background color/image to the blogger but the difficult part in footer is that you have to control it with css so that it adjust according to your template.
Before editing first backup your template this is important in case you want to revert back to your initial stage.

Steps  Involved:
  1. Login to your dashboard.
  2. Click on layout tab,click edit HTML.
  3. Expand widget template
  4. Use your browser search(Cntrl +f) to find footer or footer-wrapper or footer-wrap (It may be different in different templates) or something with footer.
  5. Your footer will be something  like this.



6.Now Add background: url(Your-image-url.jpg) no-repeat; anywhere between the brackets { and }.
So that your Footer section Now becomes.
#footer {
width:960px;
background: url(Your-image-url.jpg);
padding-top:15px;
text-align:center;
margin:0 auto;
}
Do not Forget To replace Your-image-url.jpg with your full image url which you can upload on any image hosting websites like tinypic.com or photobucket.

7.And  Click    Save Template 

This might Work For you But If you image is not alligned ,shorter bigger and want  control on image or want to learn some Image Css properties you can read below.

Specifying How the background image repeats :
You can use background-repeat: repeat-x background-repeat: repeat-y background-repeat: no-repeat along with your image url to make it repeat horizontally ,vertically or for no repeating respectively.
Example:
background: url(Your-image-url.jpg) ;
background-repeat: repeat-x;

Or
background: url(Your-image-url.jpg) ;
background-repeat: repeat-y;
Or
background: url(Your-image-url.jpg) no-repeat;

Positioning the background image 

You can position your image using distances (in pixels px) and percentages(%) or using relative positions.Examples are taken from NCdesign
Using Distances(pixels)-background-position:100px 25px;
Adding this line with your image url will place your image 100px towards the left and 25px downwards taken from the top.Assuming Center is at the top-left of the screen.

Today is fine.

Using Percentages(%)-background-position: 25% 75%

Today is fine.

Learn More :

Where i can find more examples and tutorials for CSS or particularly background image?
  1. Css background at w3schools
  2. Stretch background Image at webdesign.about.com
  3. Controlling background images and colors at elated dot com

Comments

  1. Thanks for a good post. Seo footer links are good upto some extent and it may harm you if 100links rule in not followed in the page.

    But according to Web 2.0 style footer is also a good way of optimizing the pages.

    http://www.quickheed.com/seo/seo-footer-optimization.html

    ReplyDelete
  2. Thanks for the post, I will use it at www.compuclasesbahia.com.ar

    ReplyDelete
  3. THANK YOU for this post! I had been wrestling with the image scrolling in the footer, even though I had indicated "fixed"...and repeating itself, even while using "no-repeat" - the positioning "distance" you suggest via pixels finally resolved the problem - many many thanks!!

    ReplyDelete
  4. My blog footer is like this, how can i add background image?
    /* Footer
    ----------------------------------------------- */
    .footer-outer {
    color:$(footer.text.color);
    background: $(footer.background);
    }

    .footer-outer a {
    color: $(footer.link.color);
    }

    .footer-outer a:visited {
    color: $(footer.link.visited.color);
    }

    .footer-outer a:hover {
    color: $(footer.link.hover.color);
    }

    when i add image using
    .footer-outer {
    color:$(footer.text.color);
    background: url("url of image");
    width:1040px;
    height:350px;
    float: right;
    margin-right: 10px;
    padding:2px 0 0;
    }

    it doesn't look fine :(
    I'm using Blogger Template Style
    Name: Watermark

    ReplyDelete
  5. well i cant find that code in my blog html even if i expand widgets :( ---> http://jokeuploads.blogspot.com/

    ReplyDelete

Post a Comment


Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.
Thanks for reading,
Admin

Popular posts from this blog

Best DoFollow Blog directories list for seo

List of Dofollow Blog directories,
Note: some items have profile information some do not, doesn’t matter, they’re all DoFollow Blog directories so submit your blogs to them all.
DOFOLLOW BLOG DIRECTORIES

Bloghop.com
Year Site Created: 2000
Indexed Pages in Google: 103,000
Backlinks in Yahoo: 542,700
PageRank: 6
Link Status: Dofollow
Quantcast Rank: 200,223
Editorial Policy: Yes
Spam in index: No
Submission rules: From the website:
We will reject: Spam blogs, hate blogs, stolen blogs, links to non-blog websites, links to illegal or illicit topics like child pornography. Blogs with under 5 posts are no longer accepted, but they might be waitlisted for later review if they look cool.
Commercial blogs are fine, but they must be “fun and useful.” Because of the huge amount of robot-generated blogs being submitted, blogs with the following will not be approved for listing: Acne, Mesothelioma, Real Estate, Lawsuits, Insurance, Gambling, SEO, Web Marketing, Medical Procedures and En…

Get ip-address widget for your blogger

Here is a unique collection of  IP address widgets which shows your visitors their Ip address,operating system,country,browser and the version of the browser.It is cool thing to display  ip address to your visitor's specially if you have TECH related blog.
Now you can get these any of these widgets and add these to your blogs by following these steps -

Get Ip Address Widget for your blog

1 .Choose any widget they are in different size and shapes,choose any according to your blog requirement.
2. Login to blogger dashboard ,and the click on Layout - > page Elements .
3. ADD a new HTML/Javascript gadget anywhere in your blog.
4. Copy any code from below(all are working) and paste in to HTML / Javascript gadget and then save your gadget.
5 Done,Your widget is Now live


1 .Square Ip Address Widget (Height=125px, Width=125px)<!--Ip Address Widget Starts--><span style="display: block; text-align: center;"><a href="http://myfundoo-blog.blogspot.com">…

Add a reply option to blogger comments like Wordpress

If you Are using blogger platform for your blog than during some stage of your blogger life you must have noticed that blogger does not have Reply option to it comments.This is one of the major reason why people migrate towards Disqus or IntenseDebate comment Platform.
I suggest you to read this - Readers can't comment on your blog - Tip For You

With a very little change to your template you can add this hack to your blog.
This hack was originally posted on thisischen

ScreenShot :
Update - Previous Reply code was not working for some blogger templates.This is an updated version and work well with all templates
Adding Comment Replies to your blog.

Step [1] In your dashboard Click 'Layout' > 'Edit Html'> Tick the 'Expand Widget templates' box.

Step[2] Find the following code in your blogs Html : <data:commentPostedByMsg/> 

Step[3]. Paste the following code Directly Below/After <data:commentPostedByMsg/>  




<span class='comment-reply'…