Creating Background Images for Your HTML Web Page
Now let’s look at adding a background image. You can use a color and an image, and in the case that the image doesn’t display for the user, or if it takes a long time to load, they will see the color instead (or while the image loads). Let’s find a tileable background through Google image search (keep in mind, for your web pages, you will want to find public domain or “free-to-use” images. Make sure you have permission to use the images that you put on your web site!).
Let’s go to Google:
We’ll click “Images” at the top to enter Image search. Type in “free tileable background” and hit Search Images.
You’ll get pages full of matches. Pick any one, in our case we’ll go with this one on page 3:
On the next page, you want to click the “See full-size image” button, and immediately below you can see the page that this file appears on. You will notice it is in the blog’s header, so you can peak ahead of time.
On the next page, right click the image and select “Save Image As”:
And save the file to the location of your html file. You can rename it - in this case I renamed it “tiletest.png”. PNG, JPG, and GIF files are all fine for web graphics. If you get a BMP file, you should probably open it in Paint and save it as a JPG - BMPs take up lots of space and may have very slow load times. On the other hand, you can lose quality by converting. [Note: This image is probably not free for use - you must always check the rights on an image before using them. I am using this image for instructional purposes only.]
Now we want to set our background to use that image:
<HTML>
<HEAD><TITLE>Background Color</TITLE></HEAD>
<BODY bgcolor=”#0099CC” background=”tiletest.png”>
My background is pretty.
</BODY>
</HTML>
And we get:
The mark of a good tile is that you can’t tell the beginning from the end. In this case, an excellent tile! Most of the time you will want to use blander images so as not to take attention away from your text and other graphics. Non-transparent images will also appear blocky when set on top of background images, so you will probably want to use tables to keep things looking nicely. We will get to tables later on.
Loading ...
If you like "Easily Create Background Images for Your HTML Web Page,"
please consider linking to this article:
[…] Easily Create Background Images for Your HTML Web Page […]
[…] Easily Create Background Images for Your HTML Web Page […]