WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Removing CSS Background image for legibility an Accessibility requirement?

for

From: Swift, Daniel P.
Date: Mar 15, 2022 12:32PM

Hmmm – you might have to explore other image size options on a case-by-case basis. Alternatively, you might be able to see if the image loaded using JS. I'm not sure if that will work when the image is a CSS background. If the image fails to load, set a class or background color at that point.

Daniel Swift, MBA
Senior Web Specialist
University Communications and Marketing
West Chester University
610.738.0589

From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Tom Livingston
Sent: Tuesday, March 15, 2022 1:57 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Removing CSS Background image for legibility an Accessibility requirement?

On Tue, Mar 15, 2022 at 1:36 PM Swift, Daniel P. < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >> wrote:
>
> It should just work if you set the background color first and then background image/size afterwards. Something like this:
>
> #container {
> color: #FFF;
> background-color: #000;
> background: url(image.jpg);
> background-size: cover;
> }
>
> Daniel Swift, MBA
> Senior Web Specialist
> University Communications and Marketing
> West Chester University
> 610.738.0589
>
>
> What is the best way to plan a fallback for when a bg image doesn't
> load when using white type over a background image? A dark background
> color also specified? This seems like it would have some issues, like
> scaling text causing the BG color to be visible.
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>

I get that, but I may not want to use background-size:cover; in every
situation. THere could still be cases where the black could peek from
behind the image.

--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399