We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.

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