Adding images to your webpages is a fairly simple process. Images are handled with the Image tag <img /> (note that the Image tag is a self-closing tag). The 'src' attribute of the Image tag is where we define where the file is relative to the web document. For example, this image tag:
Would indicate that the "foil.jpg" file is in the same directory as the webpage that we wish to add the image to. You can also use a URL to add an image from another website (though this is generally considered bad practice as it leaches bandwidth from the hosting site; best used only if given permission from the host).
An important attribute with the Image tag is the 'alt' attribute. In the event your image fails to load, the value of the 'alt' attribute will be displayed. It is also used by certain screen-reading software to provide an alternate description for those who cannot see the picture. For example:
It is important to not use acronyms when defining the value for the 'alt' attribute, as certain screen-readers cannot distinguish acronyms from actual words.
The final two most common attributes with the Image tag are the 'height' and 'width' attributes. The values of these attributes will be the actual dimensions that the web browser will render the image; if the image is bigger than the given values, the browser will attempt to scale (usually not very well) the image. It is always best to use third-party image-editing software to re-size any images you intend to use instead of having the browser do it for you (because the entire image will have to be downloaded first in its original size, which can make the loading of your page quite slow). It is also recommended that you include these attributes even if you are not attempting to use the browser to alter the size of your image.
Images are considered inline elements, meaning that they will not present block-type attributes, and they pertain to the CSS property 'text-align' as defined within block elements (more on all this later).
Images can be applied to the backgrounds of almost any element by using the CSS property 'background-image'. For example, if I wanted to have an image be the background for a Div tag, I could define it as an in-line style:
You can further define properties of your background image with the CSS properties 'background-color', 'background-position-x', 'background-position-y', and 'background-repeat'. Alternatively, you could use the CSS property 'background', which takes values from all of these properties.
For example, if I have a Div that is 400 x 300 pixels in size, with a black background, and I want to display my image in the background in one of the corners, I can define it as such:
If I wanted to put the image in a different corner, I would change the 'top left' values of the 'background' attribute. For instance, if I wanted to put it at the lower right corner, the code would look like this:
If I wanted to have the image repeat along the left side, I would position it in the top left corner and then have it repeat along the vertical axis:
If I wanted to have the image repeat across the top, I would repeat it on the horizontal axis:
Finally, If I wanted the image to repeat throughout the entire Div, I would use:
Of course, when used as backgrounds, images can have text placed on top of them: