CSS instructions

The final technique employed in this example is the use of a relative file path preceded by two periods and a forward slash: background-image: url(‘../images/backgrounds/dinner_glass.jpg’); The two periods and forward slash before the reference to the images directory tells the browser that the images directory can be found in the parent directory of the style_sheets directory. The parent directory here is the chokoloskee-island directory. This is necessary because, if I specified the file path like this background-image: url(‘images/backgrounds/dinner_glass.jpg’); the browser would expect the images directory to be in the style_sheets directory and would consider style_sheets/images/backgrounds/dinner_glass.jpg to be the path to the dinner_glass.jpg. Of course, the browser wouldn’t be able to find the image there. So I used the two periods and forward slash to tell it to first go up one directory level before looking for the images directory.

I also employed similar techniques for the dinner_glass.jpg image that I used for the background of the
dinner menu. Although with this second image, I used Adobe Photoshop with the various filters and the
image editing tools it offers to soften the original photo, thereby ensuring that the text of the menu itself
would not be difficult to read with the dinner_glass.jpg image behind it. Adobe Photoshop offers a far
more powerful range of image-editing capabilities. I also gave this image a size of 1600 x 1200 pixels so
that it would respond gracefully to adjustments in the user’s screen resolution and the user’s default text
size. Once more experimenting with different JPEG compression rates, I achieved an image about 60KB
in size, which results in acceptable download times for the majority of users.

One (palms.jpg) to the background of the element, which in essence means the browser view port. This image is a softened representation of a Chokoloskee sunset as viewed from JT’s front porch. I created this image with the largest possible screen resolutions in mind, giving it dimensions of 1600 x 781 pixels. This allows the background image to remain stretched across the view port as the screen resolution increases. It isn’t the best way to approach the background image, but CSS offers no way to dynamically resize the image with the area available to the image. In other words, you can’t dynamically scale the image to 1024 x 768 (if that is the user’s screen resolution). In order to size the background image so that it reaches the most screen resolutions, I’ve made it as wide as the largest screen resolution I’m willing to target: 1600 x 1200.
watch movies online. watch movies. free online movies

I also experimented with different JPEG compression rates to get the image as small in file size as possible, selecting the lowest-possible compression resulting in the least artifacts appearing in the image. Compression artifacts are very similar to the effects of pixelization that I discussed in Chapter 4. An image of low-quality compression containing artifacts makes the image ugly, so I settled on a compression rate that produces as few as possible. This technique can be explored with Adobe Photoshop or other graphic editing tools.