HTML Working with Images - Setting an Image as the Background
(Page 3 of 4 )
Aside from setting your background to a specific color, you can also set it as a particular image. You will need to keep in mind, however, how the background image will fit in with the rest of your site, in regards to color and theme. Also, if the image is smaller than your web page, it will be tiled and repeated across the page, which may or may not be your intention. Although this should be blatantly obvious, if you background is dark blue and your text is blue, users may have trouble reading the text.
Since this article is really more of a how-to rather than a what-to, we'll stick with how to insert the image and let you worry about the aesthetics:
<html>
<body background="somebackground.jpg">
</body>
</html>
Floating Images
You can set how an image floats next to a paragraph using the align attribute once more. Only this time we do it in conjunction with our paragraph:
<html>
<body>
<p>
<img src ="sample.gif"
align ="left" width="50" height="50">
It was a dark and stormy night. A fat man stood in the rain eating a burrito and adding to his already incredible mass...
</p>
<p>
<img src ="sample.gif"
align ="right" width="50" height="50">
A skinny man sat in the rain, watching a fat man eating a burrito and adding to his already incredible mass. He thought to himself: "What a fat ass."
</p>
</body>
</html>
By assigning the align attribute a left or right value, it dictates which side the image will appear on (left or right...duh).
Next: Setting Your Image as a Hyperlink >>
More HTML Articles
More By James Payne
