Hacker News Reader

Comment by HelloNurse | Hacker News Reader

The article criticizes the abuse of background-image as a cheapass replacement for the img or picture tags that should be used for "content images".

It's not a controversial point of view: background-image has always been intended to be purely ornamental (for cases in which background-color doesn't look good enough) and there's no reason to worry about "semantic" features like alt text (a blind or text-only user doesn't care for how the page background is painted).

What perverted line of thought led to the apparently widespread abuse of background-image for content? CSS sprites, as suggested in other comments, are a significant hack that might have set an example but true content (rather than icons) in background-image is on a different level and requires additional explanation.

View on HN

I would suspect the main reasons are the possibility to format images are greater for background-image than img. Functionality like background-size cover or contain in a background image are difficult to mimic with an img tag.

But these features are meant for ornamental images, which should fit their container instead of being displayed "naturally". Stretching or cropping content images (instead of scaling and padding them, which is equally easy to do with proper and improper markup) is intrinsically inappropriate, not something worth doing.

I disagree. I would say cropping images is essential to be able to use images in responsive designs. It is obviously possible to make websites where images have the same aspect ratio on all devices, but in reality you dont always have the same people in charge of design as implementation.

In a responsive design, an image can be displayed with its proper aspect ratio, cropped as the author saw fit. It can be scaled to fill the available space horizontally or vertically, and it can be optionally optimized with a picture tag instead of a img tag to load a lightweight version if the available space is small.

Practical example: a group photo of 15 people smiling at the camera on the official page of some event. You adjust colour, you rotate the picture to get a horizontal horizon, you crop different amounts of excess background on each of the four sides. Then would you like "responsive" tricks to automatically slice away their feet because the screen isn't tall enough? Maybe their heads or a bit of both? Or should they be stretched instead, to disturbing squat proportions?

What kind of pictures look better deformed or mutilated than, at worst, unobtrusively letterboxed?

As i said before im not disputing that it is possible to make responsive design keep same aspect ratio always. Im just pointing out that in reality you can not control all parts of your work. Design as i said can be done by people you have no influence over. And they might have very relevant reasons for making it the way they do.

Obviously the ideal situation isnt to crop images, but if the people using the system is aware they can select images that do not have esential information in the edges.

`img` tags are (or partially were, with the recent introduction of the object-fit property) significantly harder to properly style and position. Contrary to your argument, achieving certain layouts with `img` tags required significant style hacks, while using `div`s with with a background-image has always been straightforward.

One explanation is that it's more difficult for non technical users to copy the image or url. Which worries many publishers. Eg people using their images/content without consent. DRM is a thing.

Both are just a right click -> inspect element away, I don't think anybody who knows how it works would advocate that.

"...background-image has always been intended to be purely ornamental..." That works for purely ornamental images, especially if the browser includes the ability to disable the background-image command (I wrote a document with ideas how to make a better web browser program, and one of the ideas is "meta-CSS", which is capable of doing this; the privileged CSS priority settings that I wrote about would also be capable of it; and you can also use both together if wanted).

It's largely used for large/fullscreen hero images on a page header with text overlaid. The easiest way to ensure required portions of the image are visible and the image always fills the container, and the text placement is exact, was background image. It's a problem we can now solve in multiple ways, with object fit and also with CSS Grid. But there's some inertia on the old background image technique; it's long established and will take time to turn around.

Author here. Yep, this is exactly my point! Don't use CSS background-image for "content images". There are significant downsides for doing so.

Reply on news.ycombinator.com