Header Background Images

Header background images are the short and wide images displayed near the top of the page, underneath the main navigation bar.

You can upload any size image for the header, and it will cram or expand it into the space for the header image. However, you can create a properly formatted image with an editing program such as Photoshop. You’ll need to look for an image that has a very wide and panoramic point of view. UTC provides high quality University Photography.

  • The size of the HTML CSS division that the header image covers is 1170px X 125px
  • The area of the image that is visible at max width is 940px

Begin with a blank canvas at 1170px X 125px. Then, download or acquire an image at very high resolution... the higher the better, because this is such a wide aspect ratio, you will need a lot of width after you crop to the desired area.

Paste your image into your blank canvas as a new layer (dragging the file onto the canvas will do this in Photoshop).

Switch to the Free Transform Tool (CTRL T or CMD T). Hold the shift key down to constrain proportions, and drag the corners of your image until the desired area is within the canvas, and the "area of visual interest" is to the right. If your image is too narrow to fill the canvas... do not panic. Just finish the transformation by hitting Enter.

If your image does not cover the canvas… well, hopefully it covers most of it. If not, use the rectangle selection tool to select from the right edge of your image to somewhere in the middle. Ctrl-C to copy, Ctrl-V to paste. Ctrl-T again to use the Free Transform tool. Click and drag the right side of the image over to the left side of the canvas, creating a mirror image, and hit Enter to transform. Use the arrow key to nudge this over to the right so it meets the edge of the original image.

You will end up with something like this:

header background image

If your image is too blurry or pixelated, get creative with Filters > Artistic Brushes. If it is too washed-out, try Image > Saturation. You will quickly find a favorite look that creates a pleasing, painterly effect.

For the image above, we used the Crosshatch Artistic Brush Filter, set to the smallest values, and Saturation to bring out the red bricks. Notice the Monster Trees on the left... the user will never see them because they are obscured by the title area on the webpage. The JPEG compression codec will be happy because it will find a whole bunch of repeated patterns and similar color pixels, so this very wide image will not have a very large file size.

Where to change the header background image

  • Background Image is specified in the section Properties
  • Edit _props.pcf, click the Edit button
  • Scroll down to Header Information Components
  • Click Edit
  • Upload your image via the wysiwyg editor
  • Save and Publish, then re-publish any existing pages to inherit the new header background image

Final product:

Header image demonstration