Background images in TailwindCSS - the clean and easy way

My biggest issue with TailwindCSS was the ugly way of using background images with it. I had to inline background-url property and it was not clean. And I know I was not alone, because other frontend developers said the same thing. It looked similar to this:

<section class="bg-accent-dark bg-cover"
  style="background-image: url({{ 'images/home/hero.jpg' | asset_url }})">

Note: We use liquid to generate url to an image placed on CDN.

Couple days ago, when I was doing six different themes in TailwindCSS using six different configs (I will report my findings in another article) I discovered that it can be simplified. Because CSS file is also on CDN, and the background-image can be customized in TailwindCSS config (read more), it can be replaced with simple bg-hero after adding its definition into theme extend section:

backgroundImage: {
  'hero': "url('../images/home/hero.jpg')"
}

Now, our hero element HTML looks like this:

<section class="bg-accent-dark bg-cover bg-hero">

And I think its much cleaner! Reading documentation paid off :)

Read more

If you are interested in more performance oriented content, follow me and I promise to deliver original, or at least effective methods of improving your website.

Using WebP in Your Existing Webpage

Paweł Kowalski for platformOS ・ Nov 17 '20 ・ 4 min read

#webperf #design

Optimizing Images For The Web

Paweł Kowalski for platformOS ・ Apr 24 '20 ・ 8 min read

#beginners #node

3 Tips on Preserving Website Speed

Paweł Kowalski for platformOS ・ Jun 24 '20 ・ 6 min read

#webperf #webpack #javascript #css

Comments

[Paweł Kowalski]

Because with TailwindCSS (and especially when doing six different themes with one set of CSS files) I want to keep my CSS untouched as much as possible - having those definitions in config means those definitions will be generated per theme and included only the one needed for particular theme.
So two reasons: It's tailwind way and themes constrains make it easier to mantain later.

[Benjamin Russell]

I have done my bg images in the same manner, but I'm curious, how would you implement webp images AND your default images that do not support webp. I was looking for the best approaches to this and didn't find a clean answer yet. Perhaps you do?

[Paweł Kowalski]

Thats a good question, especially now that WEBP/AVIF is getting traction.

I dont have the universal answer yet, but in case you use Cloudflare (or any other CDN that provides user-agent-based image optimization) you can turn that on.

I know imgix (and probably a lot more cdns) has something similar, with transformations inside the url.

Of course thats not applicable for every website but I've noticed a lot of websites are using CDN with that feature.

Another way of doing it, which i probably wouldnt ever do for images above-the-fold is:

• have the urls in data-src="{ jpeg: 'example.com/cat.jpeg', webp: 'example.com/cat.webp' }" of an element
• detect using JS which format is supported
• load legacy format as a fallback
• have <noscript> as a fallback just in case JS fails/is not present