Lesson 11 (images)

One needs to be very careful with images, because
things might show up differently depending on the viewer's screen
size.  The viewport element in the head section is recommended
to set the given at reference zoom 100% (and a phone screen
will scale down rather than cut).

That said, it is obvious that my background image is set,
and repeats on a larger screen. One obvious solution: an image
with merging edges...Another would be to use a (pale)  smallish
Snowboarder-type icon to create a background pattern...

Note that I was careful not to distort the orange by setting the width in pixels
and the height to auto. This is a shortcut when one doesn't want to do the
math from the actual image.

                                      *     *     *

And for those of you discouraged that I am not working on centering
things in my colorful page examples; do not assume that high color is
always where we are going. Wired magazine, below, has a great home
page, very minimalist, that loads fast. The high color moments are left to the
ads and lead articles!!!

http://www.canadaone.com/ezine/expert/expert_qa.html?id=101


                                       *     *     *
HTML5 offers us the possibility to offer different images as a function of
the size of the device being used.  The browser will check the minimum size standard
we have asked for each picture, and move down the list until a match is found.
The img at the bottom will auto-size as a last resort.