How to put background for your blog

This is for blogger background. Have it for free if you like it. This is the largest size(i forgot the size).
I use this one. This is smaller than the first.

Right here I will teach you the simpler way to use background. Follow the step first.
1. You need to upload you picture to something like photobucket or imageshake or other.
2. Sign into Blogger > Design > Edit html
3. Ctrl+F and look for " body { "
4. Here is the code

Across the whole page like a wallpaper

Effect : a.This will make the page loads faster.

            b. simplest of all background effects to achieve.

 

body { background: #FFFFFF;

then you add this

body { background: #FFFFFF url(http://URL for your image goes here) }

 

Image repeat vertically down the page

Effect : a. The background will repeat on the "y" (vertical) axis.

body { background: #FFFFFF url(http://URL for your image goes here) repeat-y; }

 

Image repeat horizontally down the page

Effect : a. The background will repeat on the "X" (horizontal) axis.

body { background: #FFFFFF url(http://URL for your image goes here) repeat-x; }

 

Image without repeat

Effect : a. This will make your background will stay still wherever you scroll.

body { background: #FFFFFF url(http://URL for your image goes here) no-repeat ; background-attachment: fixed }

 

Using a color

Effect : a. You can use a color and a background together (I think you should put it together  or you will be left with blank white areas)

            b. look for the Hex colour and replace "#FFFFFF" with the other value hex. (You can get it from here htmcolor)

body { background: #FFFFFF url(http://URL for your image goes here) repeat-y; }

 change into

body { background: #151B54 url(http://URL for your image goes here) repeat-y; } 

 

Positioning the background image

Effect : a. You can specify where you would like the image to be placed

       b. here is a list of the positioning variables you can use:

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

body { background: #FFFFFF url(http://URL for your image goes here) no-repeat top center; }

 

0 comments:

Post a Comment

Recent Comments :

Recent Posts :

Twitter

    follow me on Twitter

    Popular Posts

    CBOX!