Is it possible to add an alt tag to a background image?

Hi, is it possible to add an alt tag to a background image? I’m using lots of background images on a site because the image element is quite limited to use for functions such as filling the whole height of a column without the use of CSS, and for SEO purposes it’s best to assign an alt tag to images used.

Thanks!

Hello @core365,

Thanks for asking. :slight_smile:

Please note that ALT tag is a HTML attribute and on the other hand background-image is a CSS property which is complete different property. Most of the time background image property is used to give visual appeal and aesthetics. For more information, I suggest you to please read following article:

http://davidmacd.com/blog/alternate-text-for-css-background-images.html

http://christianheilmann.com/2009/02/25/so-how-do-you-add-alternative-text-to-background-images/

Thanks.

Hi, thanks for explaining!

Would I be able to make a request for the image element to be more usable eg you are able to specify if it is to fill the height/width of a column and to then choose what part of the image it is to focus on, then I wouldn’t need to use background images as much, as the image element is too limiting as it currently stands.

Cheers

Hello @core365,

Thanks for updating the thread.

  1. I think you might be using classic image element. I suggest you to try out V2 Image element as it comes with host of GUI control that you can take a look.

  2. I haven’t quite understood the second part of the question. So I request you to please elaborate the same.

To learn more about image element, please take a look at following resource.

Thanks.

Hi, I am using the V2 image element, it’s not the classic version. I want to be able to set the height to fill the height of a column and to be able to then enlarge the image within a set height and to choose where it crops. Can you let me know where the GUI control is you mentioned, as all I can see is sections for:
Setup (width and max width), Image, Margin, Padding, Border, Outer Border Radius, Inner Border Radius, Box Shadow.

It’ll be great if I am missing something and there’s a load of controls and features I’ve overlooked!

Cheers

Hello @core365,

Setting the width and height of an image element will not look good because the image can be stretch out or will be squeeze. You can only control one property. Either the width or the height but not both so that it will display nicely and pixel perfect. This is why we only have width and max width properties in the image settings.

You can set the width to auto and then find the “Customize” tab and insert an inline element css like this:

$el img {
   height: 300px;
}

With this custom css you can set a height for your image. Just remember that since you set the height, it will always be 300 pixels for example in all across screen sizes. You may have another series of new complication in this settings.

We highly recommend that if you want to have a same height column where one of the column displays an image, the best route to do this is still by making the image as a background image of the column. And since it will be background image, it cannot have an “ALT” text because a background image is a style property of an element and ALT tag is an attribute of an element.

Hope this explains it briefly.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.