Creating a Framed Picture

This page walks you through the process of developing a web page for displaying one picture from a gallery of photographs. There are lots of photobloggers doing this sort of thing, and they use a variety of techniques to achieve some intersting effects, some of which involve Flash and/or Javascript. But this page is different: it uses the photo gallery problem as a context for working with background images.

The background of a box extends from the outer edges of the box’s border inward. A box can have both a background color and a background image. The image is in front of the color, so any transparent part of the image will let the background color show through. For this exercise, we will create a vignette effect. Normally, vignetting is considered a defect caused by a poor quality lens, but some people like to use it as an artistic effect. We will pretend a client has asked us to create this effect for a set pictures being displayed.

In a perfect world, XHTML and CSS code that pass the w3.org validation tests will display the same in all browsers. But the world is not perfect (sorry), and the techniques shown here will produce different results in different browsers. However, these techniques produce nearly identical results in the current (as of the time of writing) versions of Internet Explorer (IE), Firefox, Opera, and Safari. Most notably, the techniques shown here will not produce reasonable results using versions of IE numbered 6 and below. In the real world, this fact would have to be addressed, possibly by detecting the brand and version of the user’s browser and redirecting those users to a different page with fewer features.

The pages in this project will have three main sections: a header to hold the name of the picture, a content section to hold the picture itself, and a footer section that will contain two subsections, one for links for navigating through the gallery and another one for links for validating the markup and stylesheet. It is natural to use divs for each of these sections: The content section will contain a picture, a vignette surrounding the picture, and a clickable link for going to the next picture in the gallery. There are two choices we need to make: (1) should the picture change size when the user changes the size of the viewport and/or the text size? (2) Should the vignette get clipped away when the viewport shrinks, or should it always be present?

For the first choice, our client has said that all pictures in the gallery have to have the same image size, 900×566 pixels, so we have to keep the picture size fixed. Each picture in the gallery is prepared for the web using a program like Fireworks or ImageReady to set the height and width to fit in a canvas with these dimensions, with areas of the image that do not fill out to one dimension or the other (or both) set to a color that will match the background color of the content div. When the viewport is large enough for the content div to exceed the intrinsic size of the picture, the background color of the div will show around the picture. For this project, we will use black as the background color, black as the color of the matte surrounding the optimized image, and black as the color of the vignette. You could use any set of matching colors for other effects.

At this point, you can add an h1 to the header section with the name of the picture, an img tag to the content section for the picture to be displayed, and all the links to the two footer sections. As an added feature, you can surround the img with a link (a tag) to the next picture, repeating the functionality of the Next link in the footer section.

Do not use the height and/or width attributes in the img tag; they will prevent the picture from changing size when the user changes the size of the browser window.

While there are sound reasons for starting with a site-wide style sheet and either modifying it or supplementing it with a new sheet for the picture gallery, we will assume here that there is just one blank stylesheet for this project so we can avoid distractions due to settings that come from somewhere else.

Set up a link to your new stylesheet and initialize the sheet with the following rule:

The color and background-color properties are there simply so we can tell if they are in effect when we don’t expect them to be.

The font-family property is a matter of personal preference. Most people think that sans-serif fonts (like Helvetica and Arial) are easier to read on a screen and that serif fonts (like Times Roman) are easier to read on printed pages.

The last two properties are very important for getting the page to work correctly. The margin has to be set to zero because by default most browsers put a margin around the content of web pages, which would show up as a red border around the edges of the viewport. The margin setting is necessary because there is no standard for whether the html and/ or body should have a margin or not. Remember, each browser has a default built-in default stylesheet that it uses for displaying page elements in the absense of any other stylesheet rules.

The height attribute, on the other hand, illustrates a basic CSS rule: by default boxes are made large enough to contain their content, and no larger. To get the footer div to stick to the bottom of the viewport, the browser has to make the height of the body match the height of the viewport, no matter how the user decides to resize the browser window.

Finally, the following two rules will divide the viewport so that the content and footer divs together fill the entire height of the viewport. The background colors will be the ones used for the project: The content will be white except where we put the picture and its frame, and the footer area will be all black, with light colored lettering for any text that appears there:

With this stylesheet in place, you should be able to view your web page in any of the current browsers and see plain white in the top 85% of the viewport and plain black in the bottom 15% of the viewport. The red background assigned to the html and body elements should be completely covered. (Actually, Opera and Safari both leave a one-pixel high piece of the background showing along the bottom of the viewport. IE 6 processes this part of the project correctly.)

Before adding the picture frame border to the project, note that background images are going to be made up of pictures with certain “intrinsic” pixel dimensionalities. That is, the size of a background image is whatever size is built into the image file, and there is no way to change it. (In contrast, images that are part of a page’s content can have their intrinsic sizes altered in a number of ways.) What CSS does provide for background images is control over how a background image repeats over the background: horizontally, vertically, in both directions (called “tiling”) or not at all:

The strategy for making the background into a picture frame is to have the top and bottom be very narrow images with their heights equal to the thickness of the frame we want and to make them repeat horizontally across the width of the frame. Likewise, the left and right sides will be have widths equal to the thickness of the frame, will be very short, and will repeat vertically along he height of the frame. Practically speaking, “very narrow” and “very short” can be as small as one pixel wide or one pixel high, leading to very modestly-sized image files. But one-pixel thick images images are hard to work with, so we will use rectangles with a smaller dimension of 16 pixels instead of just one. Finally, to create an interesting effect, we will make the frame edges fade to transparency so they will blend with the background color as they go from the outside towards the inside. For example, if the frame color is black, these four images could be used: To show the significance of a gradient fading to transparency, here are the same four images against a tinted background. Instead of fading to white, they now fade to pink: A final piece of houskeeping is for you to attach each border to the proper edge of its div, using the background-position property. This property defaults to a value of “top left”, so you really only need to specify it for the bottom and right borders: But it a good idea to specify it explicitly for all four borders.

You can download copies of the four images by right-clicking on them above, or you can go to the images download page, where you can pick them up along with the SVG files that were used to draw them. You can edit the SVG files using the InkScape program available in the lab. (You can download the current version of this program for free from the inkscape.org web site.)