Technology Help Website: Add an Image to a Header

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

In this article:

• Adding an Image to the Header
• Cropping the Image If Needed

Adding an Image to the Header

1. Go to the Edit screen of the new page.
2. Select Header.
   
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.
   
5. Select Filter.
6. Image thumbnails will appear below. Select the image. 
7. Select Place.
8. In the Background Image section, select 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.
   
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.
   
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.