In the previous post you saw an example in which you can let readers to change the background color. This post is an extension of the above post & solution to baben's(blog mate) query which empowers your readers to change background image of your blog with the click. You can add this widget to your blog by making certain minor modifications to the code.
Best use of this could be to change the background image of the footer which can be doen with few modifications Lets first see an example :Click below image to change background image
You can add background images or change this sample, only replace the URL of the image (it is twice) for yours.
As with one of our previous gadget (Let readers decide your text size) this one is a similar one .This widget allows your reader to change background color of your blog with a click on images or simle text.
This will make your blog look attractive and the readers can not only read your content but can play with your blog too. We will do it through a java script function that will overwrite body's background color,and works even if you have an image in background.
You can see a working Example By clicking on the Color of your like.
Like this ?Now add to your blog.....
To add this widget to your blog go to page element >> Add Gadget >> Html/Javascript And paste theabove code.Click save.
IF you want you can put it as plain text like an example shown below.
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:
Login to your dashboard.
Click on layout tab,click edit HTML.
Expand widget template
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.
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?
Few Days back i wrote an article about changing the background color or image of your blogger.This hack is similar to it accept that it adds image which are limited to post area. If you are bored with your post background, you can use this hack and make your blog more appealing to your readers.
Demo : look at post background. Note:This hack only Adds image To the single post by using HTML code.
Code for Changing the Color of the Post Background
<div style="background:#FF0080; padding:5px 8px 5px 8px;"> Your Post Content goes here..................... </div>
You can change background color by changing color code background:#FF0080
Code for adding background image.
<div style="background:url(URL address of your image) no-repeat;"> Your Post Content goes here..................... </div>
Replace URL address of your image With your image URL.
