Lesson 6: Using Images As A Background
Angelfire's Background Library
Angelfire has an excellent gallery of background tiles that -to me- are suitable for most tastes. Scan through the gallery and find a background that you like. Right-click on that particular image and select 'save picture as.' Go to your Flickr account and upload that image. When you finish saving, go back into 'yours' (at the top of Flickr's page) and select the new image you have uploaded. On the right side of the page is an option called 'different sizes,' select this and it should take you to a page where you can see the "URL." Highlight the address by left clicking and dragging a edit field over the whole URL. Right-click and select 'copy'. Now that you have the code in your copy feature, go back to your blogger template. In the HTML code there is a line like this:
Change the code if you have to, sometimes instead of saying 'background' in the script it will say 'bgcolor' with a series of numbers an a pound sign. In either event, change the contents of the parenthesis to the URL from Flickr and be sure that it says 'background' and not 'bgcolor'. An easy way to replace that which is in the parenthesis is to highlight the old address, right-click and select 'paste,' this will automatically erase the old text. Preview what your new background looks like and if you like it, save it.
Note: make sure the code is exact, one flaw could cause the whole page not to work correctly...
Angelfire has an excellent gallery of background tiles that -to me- are suitable for most tastes. Scan through the gallery and find a background that you like. Right-click on that particular image and select 'save picture as.' Go to your Flickr account and upload that image. When you finish saving, go back into 'yours' (at the top of Flickr's page) and select the new image you have uploaded. On the right side of the page is an option called 'different sizes,' select this and it should take you to a page where you can see the "URL." Highlight the address by left clicking and dragging a edit field over the whole URL. Right-click and select 'copy'. Now that you have the code in your copy feature, go back to your blogger template. In the HTML code there is a line like this:
Change the code if you have to, sometimes instead of saying 'background' in the script it will say 'bgcolor' with a series of numbers an a pound sign. In either event, change the contents of the parenthesis to the URL from Flickr and be sure that it says 'background' and not 'bgcolor'. An easy way to replace that which is in the parenthesis is to highlight the old address, right-click and select 'paste,' this will automatically erase the old text. Preview what your new background looks like and if you like it, save it.
Note: make sure the code is exact, one flaw could cause the whole page not to work correctly...
posted by PATCAM 2009 at 12:19 PM
Cut Copy Paste "Unblogged" -Index
7 Comments:
Consider yourself blogrolled. Your site rocks, so you are joining my "sidebar team." If only more useful sites like this one dotted the web.
Keep up the good work.
Thank you, I was starting to wonder if anybody ever read this stuff.
You have convinced me to keep posting...
What if I have something like below, where the background is definded as a variable? How can I replace a colour with a picture?
Sorry,I was trying to paste the whole html code of my page...
In the code where it says body bgcolor= change it to body background=
You must enter the URL of the picture you are trying to make as the background.
Hope this helps. Write back and let me know!
Hi, am having trouble changing the background. I've done everything u said but the background still turns out white instead of the pic that i want. How now?
Sorry to take so long to reply, here is the answer -I hope- to your question:
In the beginning of your templates script, you should find text that looks like this
body {
background:#000;
margin:0;
Remove the part background:#000; and then scroll down till you find the body tag just below the closing "head" tag. Inside the body tag itself add the code background="url" and insert the proper address from your photo host.
Be sure to see Lesson 8, it has a guide to show you how to make the background stay still and the contents of your page scroll over it, it looks cool.
Let me know if it gives you trouble, and thanks for visiting :)~
-PATCAM
Post a Comment
Comments are always welcome, please have respect when addressing other's.
<< Home