Working with Images

Inserting an Image

From Insert Bar:

• Select Common Tab
• Select image icon that looks like a picture of a tree
• Find Image in File Dialog Box
• Insert Alt Attribute as necessary.

The Alt Attribute is designed to show text as an alternative to the image in some cases, this includes:

• When browser images are turned off - rare now a days
• When images haven't loaded yet
• For screen readers to assist those with visual impairments

You can also insert an image by dragging it from the Files Panel onto the document window. It will place the image where your cursor is on the page.

To better "place" and image, to the left or right, use the float property. Since I will often have multiple images on a page, I personally create a CSS class called fltLeft (Float Left), and lftRt Right) as listed below.

.fltLeft {
	float: left;
	margin-right: 8px;	/* to give the text some spacing from the image */
}
.fltRt {
	float: right;
	margin-left: 8px;	/* to give the text some spacing from the image */
}

Using Background Images

Background images is a common way to keep us from having a typical boring background.

Make sure however that your background isn't:

• too busy - patterns can make text hard to read
• to bright/dark - make sure your text will contrast to be readable
• contrasty - high contrast images will be difficult to work with, so use images which are
• non-repeatable - in most cases this is bad - in some cases, when is correctly it is OK

Cool things about Background Images:

• You can repeat your image horizontally, vertically, or both
• Any element can get a background image, this includes headers, anchors (links), as well as the page and divs

To place a Background Image

Select CSS element to apply background image to then:

• Select to edit (or add) CSS image
• In CSS panel, select the Background Category
• Select the Browse button on the "Background-image" entry.
• Define if you want your image to repeat, and which direction(s)
• I find it helpful to also set the background color to be similar to the image, so something is seen while the background image loads
• For advanced background use: (not as common - but can be very useful in advanced layouts)
  • Define your background position
  • Define if your background needs to be fixed or scrolling.