Streaming live at 10am (PST)

Images not background - alt text visibility, but image cover property?


#1

Hi

Background images on divs seem to be a bad idea for accessibility and SEO. What are alternative methods people use with images to get a “Cover” effect for an image. object-fit: ? Maybe flex?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Yes. In short, everything important in HTML should be well accessible and described. A background is meant for graphic design purposes only. It’s of secondary importance. So when you image is a real illustration of your purpose, it can’t be treated as a bg nor no have an alt text.

You can use the CSS object-fit property. Add a fitclass to your image, for example, and define as follow:

.fit { width: 100px;
       height: 100px;
      object-fit: cover; }

It will behave like cover for bg.

Define the fit class in a block of custom code inside your page, and add the fit class to any image you need to crop.

Other options for object-fit: https://www.w3schools.com/css/css3_object-fit.asp


#3

I added this technique to my list of clipping, masking and constraining techniques http://clipping-masking.webflow.io/