|
In this page I will share tips about how to create a background image, the first things to be done are preparing URL image we can retrieve it from the free image hosting of the website such as Photobucket, Flickr, Picasa and others.Click on the image that we want after that right-click the mouse then select view image source and click on the image and right-click again select copy image source.The URL image is like this:
http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg
Now we already have a background image as the next step is:
1.Login to Blogger with your account.
2.On the dashboard menu select layout.
3.On the layout menu select edit HTML and scroll down you will see code like this:
body (
background: $ bgcolor;
4.Change the code above with an URL image that you have Like this:
body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg);
5.If you want to repeat or not, you can change the code like this:
body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) repeat;
or
body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) no-repeat;
6.Alternatively, you may only want the image to be repeated horizontally or vertically. The code is this:
-horizontally:
body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) repeat-x;
-or vertically:
body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) repeat-y;
7.If you have an image that is not repeated, you may like to specify the exact position of this image on your page. The code like this:
body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) repeat top left;
Your image will appear at the top left corner of your page. The other possible values that you can use to replace "top left" are:
top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;
8.If you do not want it you can also define the horizontal and vertical alignments either in percentage or in pixels. Use either of these values instead, with x being the horizontal value and y being the vertical value.
x% y%;
xpx ypx;
9.You may specify whether you want your background image to remain in a fixed position when the contents of your blog are scrolled. By default, the picture Scrolls with your content. To have it fixed, the code like this:
body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) repeat center center fixed;
10.You now have a background image for your blog.
http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg
Now we already have a background image as the next step is:
1.Login to Blogger with your account.
2.On the dashboard menu select layout.
3.On the layout menu select edit HTML and scroll down you will see code like this:
body (
background: $ bgcolor;
4.Change the code above with an URL image that you have Like this:
body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg);
5.If you want to repeat or not, you can change the code like this:
body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) repeat;
or
body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) no-repeat;
6.Alternatively, you may only want the image to be repeated horizontally or vertically. The code is this:
-horizontally:
body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) repeat-x;
-or vertically:
body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) repeat-y;
7.If you have an image that is not repeated, you may like to specify the exact position of this image on your page. The code like this:
body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) repeat top left;
Your image will appear at the top left corner of your page. The other possible values that you can use to replace "top left" are:
top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;
8.If you do not want it you can also define the horizontal and vertical alignments either in percentage or in pixels. Use either of these values instead, with x being the horizontal value and y being the vertical value.
x% y%;
xpx ypx;
9.You may specify whether you want your background image to remain in a fixed position when the contents of your blog are scrolled. By default, the picture Scrolls with your content. To have it fixed, the code like this:
body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) repeat center center fixed;
10.You now have a background image for your blog.
No comments:
Post a Comment