DEV Community 👩‍💻👨‍💻

Paweł Kowalski for platformOS

Posted on

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 }})">
Enter fullscreen mode Exit fullscreen mode

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')"
}
Enter fullscreen mode Exit fullscreen mode

Now, our hero element HTML looks like this:

<section class="bg-accent-dark bg-cover bg-hero">
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (4)

Collapse
 
jfbrennan profile image
Jordan Brennan

Why wouldn't you just do:

.bg-hero { background-image: url(../images/home/hero.jpg) }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
pavelloz profile image
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.

Collapse
 
benjaminrr profile image
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?

Collapse
 
pavelloz profile image
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.
CF Polish

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

Every Week

We have a Welcome Thread where we invite members to tell us a bit about themselves. Join the conversation with us!