Header Photos-Templates and CMS - Carnegie Mellon University

Header Photos

Header photos are banners that are placed at the top of a page, such as the Fence photo above. On the home page, the header photo usually pertains to the entire website. On interior pages the header photo usually pertains to that particular page or section of the website. The decision to use header photos is optional and can be made on a page-by-page basis.

Stock Header Photos

Stock header photos are pre-sized to exactly 748 pixels in width and are available in two heights. If you'd like to use one, the first step is to download a stock header image to your desktop.

Use Your Own Header Photos

If you prefer, you can use your own photos for the header. They should be saved as JPGs, GIFs or PNGs (although note that Internet Explorer 6 does not support transparent PNG files.) They must be pre-sized to be exactly 748 pixels wide at a resolution of 72 dpi. The height of the header photo is flexible, however we recommend that they do not exceed a height of 330 pixels. To pre-resize an image, you must use a photo editing program such as Photoshop.

How to Place a Header Photo on a Page

  1. Go to the Edit tab.
  2. In the Page Options area, click the brown square Browse icon to locate and select a photo that you've uploaded.
  3. When the Smaller Window pops up, select the Folder into which you want to place the header photo. You may want to place your header photos in the "images" folder, or you may want to create a special folder called "header-photos".
  4. Once you have selected a folder, the Upload Tab appears in the blue bar beneath the Choose tab.
  5. Click the oval Browse button and locate the stock header image on your desktop.
  6. Click the Upload button.
  7. Click the Confirm button.
  8. Click the Submit button at the bottom of the page.

Multiple Header Photos

You can select multiple photos for the header that will randomly display each time the page is loaded. In the Page Options area, simply click the plus sign (+) to add additional photos.  When the page is loaded, one of the photos indicated is randomly selected and displayed.

Multiple Header Photos

Video Tutorial