NAIA Airport is the airport serving the general area of Manila and its surrounding metropolitan area. Located along the border between Pasay City and Parañaque City, about seven kilometers south of Manila proper, and southwest of Makati City, NAIA is the main international gateway for travelers to the Philippines and is the hub for all Philippine airlines.

Wednesday, February 3, 2010

Background Image

Background Image for Blogger Template

With this guide, you would be able to add a background image or picture to your Blog, customize the position of your image, and have a static background image that stays in place when you scroll through the contents of your blog.

You will need to create an image. Find a picture you like. If you need a free photo editing tool, you can either search the net for one or use Google's Photo Editing Software Picasa. You can also use a small tile-size image which can be repeated so as to cover the entire page. Try not to have an image file that is too large as your page may take a little longer to load.

After creating a picture, you will need to upload it onto a free picture host. You can read about using free hosts like Google Page Creator and Google Groups. Take note of the picture URL.

Next, log in to your dashboard layout; under Template -> Edit HTML, scroll to where you see this:-

body {
background:$bgcolor;----change

Change background color

If you would like to change the background color of your blog to a very unique color, you can manually specify the color value. Search online for color codes, or take a look at the HTML Color Chart to see if you can find your desired color. For example, if you have chosen a color code #B38481, change the above code to this:-

body {
background-color:#B38481;-----into this

If you are changing the background color of your sidebar only, add the color code under the relevant sidebar heading.

#sidebar-wrapper {
background-color:#B38481;---------change

Similarly, if you want a different color for your main post column, add the color code as follows:-

#main-wrapper {
background-color:#B38481;-----------change

Note that different templates may label their stylesheets differently. The #sidebar-wrapper may be called #side-wrap or something to that effect.

In some templates like the TicTac Template, the background color you see is due to a background image and inserting a color code into the template will not help. To have a different color, this background image will have to be edited.

Add a background image

The code to insert is this:-

body {
background-image: url(URL address of your image);

Remember to insert the URL address of your image in the brackets. If you would like to have a feel of how a background picture will look like, I have uploaded a test image at this address – http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg

Insert the URL of this test image into the above brackets and Preview your blog.

You can also have a background image just for your sidebar. Locate the style and add the background image code accordingly.

#sidebar-wrapper {
background-image: url(URL address of your image);

For a background image to your main post body only, add the code here:-

#main-wrapper {
background-image: url(URL address of your image);

Repeat background image

By default, the image is repeated to fill up the entire background of the page. If you have a small or tile-sized image, it will appear like a print pattern in the background. Sometimes, you may choose not to have the image repeated. If that is the case, you can insert this code:-

background-image: url(URL address of your image) no-repeat;
background-image: url(URL address of your image) repeat-x;
background-image: url(URL address of your image) repeat-y;
background-image: #000000 url(URL address of your image) no-repeat;
note: you can change the color (red color) if you wanr, look into the color chart.

Alternatively, you may only want the image to be repeated horizontally. The code is this:-

background-repeat: repeat-x;

To have the image repeated vertically, the code is this:-

background-repeat: repeat-y;

Position background image

If you have an image that is not repeated, you may like to specify the exact position of this image on your page. The HTML code to be inserted is this:-

background-position: 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;

If you do not want it entirely left, right or center, 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;

Static background image

After that, 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 stay put, the code to insert is this:-

background-attachment: fixed;

Putting it all together

The eventual CSS code that you will have for your customized template may look like this:-

body {
background-color:#B38481;
background-image: url(http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

You can also combine the attributes into one line and the shorthand code will look like this:-

body {
background:#B38481 url(http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg) no-repeat center center fixed;

Putting the above code into my blog, this is what you would see.

Of course, after having added the background image, you will need to adjust the colors of your text so that they stand out against the backdrop. Go to Template -> Fonts and Colors to do that.

This guide will give you an image background to your Blog. Sometimes, you may have several images, all of which are suitable for your Blog. You can read Random Header and Background Images on how you can have the background images rotated and a random image shown upon every page load.

You may also want to refer to the related article if you are thinking of adding an image to the Blogger Header.

No comments:

Post a Comment

Philippines Light Rail Transit Public Transportation

The Manila Light Rail Transit System (Filipino: Sistema ng Magaan na Riles Panlulan ng Maynila),[citation needed] popularly known as the LRT, is a metropolitan rail system serving the Metro Manila area in the Philippines. Its twenty-nine stations over 28.8 kilometers (17.9 mi) of mostly elevated track form two lines. LRT Line 1, also called the Yellow Line, opened in 1984 and travels a north–south route. LRT Line 2, the Purple Line, was completed in 2004 and runs east–west.

The LRT is operated by the Light Rail Transit Authority (LRTA), a government-owned and controlled corporation under the authority of the Department of Transportation and Communications (DOTC). Along with the Manila Metro Rail Transit System (MRT, also called the Blue Line), and the Philippine National Railways (PNR), the LRT is part of Metro Manila's rail transportation infrastructure known as the Strong Republic Transit System (SRTS)

Stations

Santolan Recto Baclaran Monumento Cubao

The People Power Revolution was a series of nonviolent and prayerful mass street demonstrations in the Philippines that occurred in 1986. It was the inspiration for subsequent non-violent demonstrations around the world including those that ended the communist dictatorships of Eastern Europe.

A glimpse of Philippine culture through traditional dances and songs performed by some of the country's best dance groups.

In 1990, it was voted by the BMW Tropical Beach Handbook as one of the best beaches in the world

Barasoain Church (also known as Our Lady of Mt. Carmel Parish) is a Roman Catholic church built in 1630 in Malolos City, Bulacan.

Laguna de Bay (Filipino: Lawa ng Bay; English: Laguna de Bay is the largest lake in the Philippines and the third largest freshwater lake in Southeast Asia

Malacañan Palace, is the official residence of the President of the Philippines.