How to hide backgroud image on small devices?

user_11094437 0
Viewed 444

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!

tailwind-css
3 Answers

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;
  }
}
user_122658980

You should do something like:

class='bg-opacity-0 xs:bg-opacity-100'
user_142605300

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.

user_31064940
Related