How to hide backgroud image on small devices? - tailwind-css

Question

In tailwindcss: 2.2 layout I have image defined in backgroud
<div class="absolute top-0 w-full h-full bg-gray-900" style="background-image: url(./assets/img/register_bg_2.png); background-size: 100%; background-repeat: no-repeat;"
></div>
and I to hide this backgroud image on small devices. I know how to use
xs:hidden
But in this case all div will be hidden, nut image. How can I do it without splitting into 2 divs ?
UPDATED PART :
I modified tailwind.config.js and added definition :
module.exports = {
purge: {
options: {
safelist: [...ta_gallery_safelist],
},
},
theme: {
extend: {
backgroundImage: theme => ({
'test-device-sm': "url('/img/test-device/sm.png')",
'test-device-md': "url('/img/test-device/md.png')",
'test-device-lg': "url('/img/test-device/lg.png')",
'test-device-xl': "url('/img/test-device/exlg.png')",
// 'personal_page_container_wrapper_bg_image': "url('/img/register_bg_2.png'); background-size: 100%; background-repeat: no-repeat;",
'personal_page_container_wrapper_bg_image': "url('/img/register_bg_2.png')",
}),
but adding personal_page_container_wrapper_bg_image to my divs I do not see any background
image or invalid path error in the console...
classes test-device-... I use to show current device and it work ok...
Thanks in advance!

Answer 1

First of all, xs:hidden will hide the element above xs screen size, not below. You can read about it here.
You can hide background-image by setting it to none. So for your case, you could write your own css like this:
#media screen and (max-width: yourvalue) {
yourselector {
background-image: none;
}
}
or to use tailwind syntax, you could use something like this:
#screen xs {
yourselector {
background-image: url(./assets/img/register_bg_2.png);
background-size: 100%;
#apply bg-no-repeat;
}
}

Answer 2

You should do something like:
class='bg-opacity-0 xs:bg-opacity-100'

Answer 3

I think the logical way is to add your background image by editing the theme.backgroundImage section of your tailwind.config.js file:
module.exports = {
theme: {
extend: {
backgroundImage: {
+ 'bg-header': "url('/img/hero-pattern.svg')",
}
}
}
}
Then you can do something like:
<div class="absolute top-0 w-full h-full bg-gray-900 bg-none sm:bg-header"
If you are not familiar with how "tailwind.config.js" works, read this section, it's the most practical way to customize tailwindcss.