Adding An Image

This guide assumes you know some basic HTML and CSS. Click this link if you don't already know how to do it How To Build a Basic Website.

Getting an Image

As nice as it is to have a website you may also want to inculde images to the site. To get started you can either use your own or you can download one from the internet. I also have a collection of images you can use by clicking this link here Graphics. Just keep in mind if you use a third party that they may or may not charge royalties for the image should you make the site public as such I recommend using your own where posible. That being said I don't personally care that you use the images on my site for yours just don't try to claim ownership of these images.

Adding the Image to The Page

To get started in the html document type in < p > < img src="YourImage.png" Alt="Your Image" > < /p > the img src= is what imports the actual image. Alt on the otherhand is a highly recommended add on that should the image not load or if the user is blind then the user can still see a description of what image should be there. As for what image type to use anything from .png to .jpg to .gif will work. Try to reframe from overly large images as they tend to eat up bandwith and server space and also try to reframe from using urls to link someonelses image as for one the image can go down at any point and two it eats up their bandwith which can be considered rude to some users.

Adding an Image

Setting An Image as a Background

Say you wanted to go a step further and set an image as your background. While this trend isn't as popular as it once was there are still people out there that may want to do this. Depending on what image type you have the instructions will be different. The two most common types you'll find are tiling and fullscreen.

Setting a Tiling Background

For those too young to remember tiling backgrounds where very small images that you would often times find on the early internet or Windows versions such as 95. These were images that would form a pattern once set as a background.

Example of A Tiling Background

Tiling Background

All you have to do to set one of these up is in the CSS document type in background: url("Name-of-Tiling-Background.gif"); in the body section.

Adding a Tiling Background

Quick Note About Comments

You may have noticed the /* and / marks. This is what is known as a comment. Anything typed within / and */ will not be read in the CSS document. This is a good way to disable commands you don't want to delete from the code or to take note of the code is doing in case you forget later and want to change it.

Setting a Fullscreen Background

This is the image type I'm sure most of you are familer with. If you have ever taken a picture with a phone or camera before you have a fullscreen image. To set one of theese as your background in the CSS document type in background: url("Name-of-Background.jpg") no-repeat center fixed; background-size: cover; it is very important that you include everything past the ) otherwise your image will tile anyway and for some images you probably don't want that.

Adding a Fullscreen Background

Closing Thoughts

Adding images opens the door to alot of potential in a website. If you wish to learn more about web design click this link to W3schools W3schools Soon I will teach you more about web design.