Technology Help Website: Add an Image to a Header

Image headers and banners can be added to Technology Help website pages ( You can recreate image headers like the following. 

Example of a header image from a Technology Advisory Council page.

In this article:

Adding an Image to the Header

  1. Go to the Edit screen of the new page.
  2. Select Header.
    Edit page tabs. Options for Content, Header, Categories, Sidebar, Links. Header selected.
  3. In the Background Image section, select Add media.
  4. In the Media browser popup window, enter keywords that may help you find the same image that is in the Background Image field of the current site page.
    Add media window. Media browser tabs listed for Library, Upload, Create embed. Library selected with a textbox to search by Keywords.
  5. Select Filter.
  6. Image thumbnails will appear below. Select the image. 
  7. Select Place.
  8. In the Background Image section, select Edit.
    Example background image with a Current Selection and buttons to Remove or Edit.
  9. In the Edit entity window, make sure the Alternative text field describes the image correctly for screen reader users, depending on its context. 
  10. Update the Alternative text if necessary and select Save.
  11. In the Background Overlay Opacity dropdown menu, select 100%.

Cropping the Image If Needed

  1. Select View to see if the banner looks okay. 
  2. If there is a white gap between the black left-hand side of the banner and the image, select Edit.
    Example image of gap on left-hand side
  3. Select Header
  4. In the Background Image box, select Edit.
  5. An Edit entity window will appear. In the Crop Image section:
    1. Select Banner if you are on an Explore page.
    2. Select Banner (Slim) if you are on a different type of page that includes an image banner.
  6. Select the bottom border of the blue crop box and move your mouse up to exclude the bottom of the image.
    "Crop image" dropdown expanded. Options for Banner, Banner (Slim), Freeform, Portrait. Banner (Slim) is selected
  7. Select Save.
  8. Select View and check to see if the banner looks okay. If not:
    1. Repeat steps 1–5.
    2. Select Reset crop.
    3. Select Save.
    4. Repeat steps 5–7 until the banner looks okay.

Last modified