Set background image with TailwindCSS
<div class="bg-[url('/img/bg_small.jpg')] w-32 h-32"></div>
You can set background image in TailwindCSS using the arbitrary value syntax or you can modify the configuration to create custom utility class.
Set the background image with the arbitrary value syntax
You can use any background image in your template file using the arbitrary value syntax. This is useful if you cannot or do not want to modify the tailwind configuration file.
<div class="bg-[url('/img/bg_small.jpg')] w-32 h-32"></div>
If the background doesn't display correctly then check if the path is really correct. The best way is to check it on the developer console:
Set background image with Tailwind configuration
You can extend Tailwind configuration with background images and then use the custom utility class where you want the background image.
First list all of your background images in the tailwind.config.js
file:
module.exports = {
content: ['**/*.html'],
theme: {
extend: {
backgroundImage: {
'demo-bg-xl': "url('/img/bg_large.jpg')",
'demo-bg-md': "url('/img/bg_medium.jpg')",
'demo-bg-sm': "url('/img/bg_small.jpg')",
}
},
},
plugins: [],
}
As a result you can write code with auto completition like this:
<div class="bg-demo-bg-md w-32 h-32"></div>
- Create blinking background with TailwindCSS
- Create a neon effect with TailwindCSS
- Rotate element with TailwindCSS
- Change SVG icon color with TailwindCSS
- Using :not in TailwindCSS
- Specify exact width value in TailwindCSS
- Set element width over 100% using Tailwind CSS
- Stretch children to fill horizontally
- Create a fixed navbar with TailwindCSS
- Use font from local files in TailwindCSS
- Make an element invisible in mobile size in Tailwind CSS
- Create a 20/80 grid with Tailwind CSS
- Select the nth child in TailwindCSS
- Add class to child when hovering on parent in TailwindCSS
- Fill the full height of the screen in TailwindCSS
- Create transition with TailwindCSS
- Create horizontal rule with text using TailwindCSS
- Set background image with TailwindCSS
- How to use CSS variables in TailwindCSS
- Center an absolute element in TailwindCSS
- Remove arrows from number input in TailwindCSS
- How to use !important in TailwindCSS
- Access child elements in TailwindCSS
- Select first child in TailwindCSS
- Create semi transparent background in TailwindCSS
- How to use calc() in TailwindCSS
- Add text shadow with Tailwind CSS