Skip to content
PatternFly logo

Background image

A background image allows you to place an image in the background of your page or area of a page.

Accessibility

To implement an accessible PatternFly background image:

  • Check that there is sufficient color contrast between different parts of the background image and any text that will be on the image.
  • A background image should not be used as the sole method of conveying important information.

Testing

At a minimum, a background image should meet the following criteria:

  • Automated testing tools don't often pick up background image colors, so they may not be able to tell you if contrast is sufficient for users with visual disabilities.

React customization

A background image does not have any further React props for accessibility.

HTML/CSS customization

A background image does not have any further HTML/CSS attributes or classes for accessibility.


View source on GitHub