Working with Images


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:

HTML <img src="foil.jpg" />

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:

HTML <img src="foil.jpg" alt="Practice sword" />

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.

CSS Design Model: Inline Element

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 as Backgrounds

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:

HTML <div style="background-image: url(''); width: 100px; height: 100px; border: 1px solid #000;"></div>

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:

HTML <div style="background: #000 url('images/fenz.gif') top left no-repeat; width: 400px; height: 300px; border: 1px solid #000;"></div>

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:

HTML <div style="background: #000 url('images/fenz.gif') bottom right no-repeat; width: 400px; height: 300px; border: 1px solid #000;"></div>

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:

HTML <div style="background: #000 url('images/fenz.gif') top left repeat-y; width: 400px; height: 300px; border: 1px solid #000;"></div>

If I wanted to have the image repeat across the top, I would repeat it on the horizontal axis:

HTML <div style="background: #000 url('images/fenz.gif') top left repeat-x; width: 400px; height: 300px; border: 1px solid #000;"></div>

Finally, If I wanted the image to repeat throughout the entire Div, I would use:

HTML <div style="background: #000 url('images/fenz.gif') top left repeat; width: 400px; height: 300px; border: 1px solid #000;"></div>

Of course, when used as backgrounds, images can have text placed on top of them:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non ultricies urna. Pellentesque sollicitudin justo vel quam bibendum in tristique odio congue. Fusce et neque ante, et euismod nulla. Aliquam ac arcu eu lorem adipiscing adipiscing vitae et massa. Fusce blandit malesuada congue. Quisque lacinia nunc a ipsum cursus consectetur. Aliquam erat volutpat. Donec bibendum rutrum tincidunt. Sed sit amet metus odio. Praesent et ante nec neque posuere congue in egestas eros. Suspendisse porttitor dapibus enim.

Content by Vincent Santa Maria.