Sunday 20 December 2009

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

No comments:

Post a Comment