Hero: Image Background

Guidelines

1. When to Use

   • Use a static hero image when you want a strong visual introduction without the complexity of video.
   • Ideal for high-level pages like department homepages, program landing pages, or campaign pages where the goal is to highlight a key message or action.
   • Best for scenarios where you want to direct users to a primary task (e.g., “Apply Now,” “Register,” or “Learn More”) immediately upon landing. 

2. What to Avoid

   • Avoid using low-quality or irrelevant images that don’t support the page’s purpose.
   • Do not use an image that is visually busy or cluttered—keep the message clear and focused.
   • Avoid images with text baked into the image, as this can cause accessibility and responsiveness issues.
   • Do not use images that clash with brand colors or make overlay text hard to read. 

3. Accessibility Tips

   • Use alt text for the image to describe its purpose for screen readers.
   • Use plain language on the call to action and ensure the button is clearly labeled.
   • Avoid images with busy patterns or distracting elements that make text hard to read.
   • Ensure the hero image scales properly on mobile devices without cutting off important content.