Tutorial: How to change background image on your web space

Få nye venner,
Start din egen blog,
Spil gratis spil,
Tilføj dine egne billeder,
...og meget, meget mere!

1. Call of Atlantis
2. Farm Frenzy 2
3. Zuma
4. Cooking Dash
5. Detective Stories: Hollywood

New songs

» Scooby Snacks
» Solitude
» Prisoner
» Wisdom
» World of Nothing
» Out of Me
» Hypocracy
» Don't
» Like You Said
» Another Day

9 reasons to join XIHA Life

#5 XIHA Music features independent bands from all over the world! Add free music to your profile and blogs from our international music collection! XIHA is the perfect place for indie bands to connect with fans globally.

Fornavn

E-mail

Valid email address required for registration.

Alder

Køn

Jeg har læst og accepteret Brugerbetingelserne.

Tilmeld!

9 reasons to join XIHA Life

#9 XIHA is probably the friendliest online community in the world! Not only are the other members extremly nice, but the site management always responds to all requests and you are guaranteed a personal reply.

Fornavn

E-mail

Alder

Køn

Jeg har læst og accepteret Brugerbetingelserne.

Valid email address required for registration.

Tilmeld dig XIHA Life

Fornavn

E-mail

Valid email address required for registration.

Alder

Køn

Jeg har læst og accepteret Brugerbetingelserne.

only in ...

Vist 4087 gange

Tutorial: How to change background image...

XIHA Life Forum → XIHA Life → Guide → Tutorial: How to change background image on your web space

Tilføj til favoritter | Hvisk | Citat | Translate

1. Webmaster | 2007-07-3 | Engelsk

XIHA Life provides everyone a free totally customizable web space. But exactly how to change the look? Here's a short tutorial on changing the background image or color of your space. This is one of the first things people want to do when creating their own web sites so this is a good first step!

1. Open the editor. You can find the editor on your own space, which is located at your username.xihalife.com. If you're already logged in, you can get to your space by clicking on your image on the left side of the screen, or your name at the top-right corner.

Once the page is open, you'll see that the top line right below the XIHA Life banner says "All members | My name | Edit". Click on the "Edit" link, the editor will open. Notice that you are not "jumping" to another page, as the editor will load up to the same page, just below the place you just clicked.

2. Once the editor has loaded, you will see a few options: About me, html, css and images. First, let's upload an image; click on the link that says "images". If you wish to use a photo from your album or if you just want to set the background color, you can skip straight to step 4.

3. Click on "Choose File" and pick up an image you wish to upload, then click "Upload". The image gets uploaded and will appear in one of the gray boxes, under which will appear the image's "tag". This is important; remember what it is. If this is your first time uploading images to the space, the tag will be [img1].

Note: there is currently a bug where the image list is not refreshed after uploading. Therefore, after the image has uploaded, reload the web page (F5 on Window, Apple+R on Mac) and open the editor again. The images tab will now display the new image.

4. To adjust the background properties, we need to edit CSS; click on the "css" tab!

5. Your CSS code is in the big text box that opens up. If you didn't edit the CSS of your page before, it probably doesn't have much text in it. Take a look to see if you can see a line of text that says "body". Most likely not. Copy the following piece of text to the text box:

body
{
}

6. Now you have a body tag in your CSS code! This doesn't do much be it allows you to place definitions to the body of your page... such as a background image. Add the following new line between the curly brackets:

body
{
background-image: [img1];
}

7. If you just uploaded an image and the tag was [img1], you're all set! Just click Save below the text box and wait until the status text next to it says "O.K.". Then reload the page (press F5 on Windows, Apple+R on Mac) and the background should be visible!

8. If you wish to use a photo from your album, change img1 to the following: [photo:xxxx] where xxxx is the id of the photo. You will find this id by opening the photo you wish to use and looking at the address line on your web browser. It's the numeric sequence at the end of the address.

Setting the background color

Sometimes it's enough to just set the background color. Even if you use an image, it's a good idea to set the color as the color will be used while the image loads (which can take a few seconds if the image is large). Go back to the CSS editor and add the following to the body tag:

background-color: red;

Click save, and refresh the page. The background will now be red. If you also have the background-image definition in place, the background will first be red and then change to the image right after the image has finished loading.

You can use the names of the common colors as well as RGB codes in the following formats: #RGB and #RRGGBB. RGB stands for Red, Green, Blue and the components are defined in hexadecimal values (0 is the smallest, F is the largest single digit). For example red would be #F00 or #FF0000. This gives you full red and zero other colors. If you wanted yellow, you would add green too: #FF0 / #FFFF00. To make it half the brightness: #770 / #7F7F00.

Naturally, all of the possibilities of HTML and CSS are in use - this is just a small sample to demonstrate how to change the background. More tutorials will follow! Please let me know if you have any questions.

Feel free to experiment with the options. Your space is all yours so you can do anything you want with it. If you make a mistake and can't figure out how to go back, clear the contents of the text box completely and click Save. This will restore the default settings and you can reload the editor and start again...

9 reasons to join XIHA Life

Tilmeld!

#7 XIHA has people from all over the world! We have members from over 200 countries speaking over 50 languages. Anything you want to know, anywhere you want to go - XIHA is the place to start your quest!

Hvisk | Citat | Translate

2. romhan | 2008-01-3 | Engelsk

Hvisk | Citat | Translate

3. jayde | 2008-04-16 | Engelsk

I DID ALL THAT MY BACKGROUND AIN'T CHANGING

Hvisk | Citat | Translate

4. Mohammad | 2008-04-17 | Engelsk

I Can't Find Editor!!!!!!!!!! Help Me!!!!

Hvisk | Citat | Translate

5. Mia | 2008-07-9 | Engelsk

Help!

I managed to set the background, but how do I get it to not scroll along with the text.

Hvisk | Citat | Translate

6. Webmaster | 2008-07-10 | Engelsk

This would require typing the following code in the CSS section (in the same place where you set the background image). We are going to make this easier in the nearish future.

body {background-attachment:fixed;}

Hvisk | Citat | Translate

7. Mia | 2008-07-10 | Engelsk

Ok, thanks alot..

Hvisk | Citat | Translate

8. arghya | 2008-07-21 | Engelsk

Hvisk | Citat | Translate

9. guan | 2008-07-21 | Engelsk

i ll try again...

Du læser XIHA Life, verdens internationale samfund nummer 1. Klik her for at tilmelde dig og blive en del af fællesskabet!

Engelsk	Fransk	Tysk	Kinesisk
Cantonese	Spansk	Japansk	Koreansk
Tagalog	Portugisisk	Finsk	Italiensk
Hollandsk	Svensk	Russisk	Hindi
Arabisk	Malaysisk	Rumænsk	Litauisk
Hebraisk	Dansk	Vietnamesisk	Polsk
Tyrkisk	Thailandsk	Norsk	Ukrainsk
Ungarsk	Græsk	Tjekkisk	Catalan
Esperanto	Bengali	Urdu	Latin
Persian	Slovak	Bulgarian	Estonian
Latvian	Somali	Serbian	Croatian
Albanian	Azerbaijani	Tamil	Swahili
Macedonian	Tibetan	Punjabi	Javanese

XIHA Life

Spil

Billeder

Venner

Blogs