Multiple backgrounds

[mrassili]

Hi,

I searched Google but couldn't find anywhere mentioned if Tailwind support multiple backgrounds ? Is there a specific syntax I can use ? Since tailwind support blend-mode I figured there must be some way to have multiple backgrounds

[mrassili]

I figured a way to do it using arbitrary values

For anyone who might need this in the future here's the class syntax: bg-[url(../assets/bg-1.png),_url(../assets/bg-2.png)] the underscore is used by Tailwind to denote whitespace

[SisyphusCoin]

Pls notice there is a "_" on head of the second url XD

[jonadeline]

@mrassili did you manage to also position each background image ?
I tried bg-[url('../bg-image1.png'),_url('../bg-image2.png')] bg-[bottom_center,_bottom_right]
but it doesn't seem to work.

[jonadeline]

@anna-tymchenko here is an exemple mixing different bg properties.

<section class="bg-pink-cream   
      bg-no-repeat
      bg-[url('~/static/images/bg-home-hero-main.webp'),_url('~/static/images/bg-home-hero-right.webp'),_url('~/static/images/bg-home-hero-left.webp')]
      rtl:bg-[url('~/static/images/bg-home-hero-main-rtl.webp'),_url('~/static/images/bg-home-hero-right.webp'),_url('~/static/images/bg-home-hero-left.webp')]
      bg-[length:150px,_80px,_80px]
      bg-[position:center_bottom,_right_-15px_bottom_-20px,_left_0px_bottom_0px] 
      md:bg-[length:300px,_100px,_120px]
      md:bg-[position:right_80px_bottom,_right_bottom,_left_0px_bottom_0px] 
      rtl:md:bg-[position:left_80px_bottom,_right_bottom,_left_0px_bottom_0px]
      px-4 pt-6 pb-[400px] h-96">

[anna-tymchenko]

@mrassili , @jonadeline Thank you! :)

[WalterKstro]

How I can use gradients and image together?

[zakutnya]

@WalterKstro

How I can use gradients and image together?

Here, i made an example.

Assuming you have something like this in your tailwind.config.js:

backgroundImage: {
    close: "url(...)"
}

.class {
    /* newlines for clarity */
    @apply bg-[url:theme("backgroundImage.close"),theme("backgroundImage.gradient-to-r")];
    @apply bg-[length:24px,100%];
    @apply bg-[position:6px_6px,left_top];
    @apply bg-no-repeat;
    @apply from-blue-500;
    @apply to-transparent;
}

Note:

• url: in the first bg-[] setting. Without this i got background-color instead of background-image;
• the image must go first, otherwise it will be under the gradient. furthermore, the url: thing from the previous paragraph seems to be not working if you set an image on the place other than first;
• theme("backgroundImage.gradient-to-r") is needed as you can’t use just a straightforward bg-gradient-to-r inside an arbitrary value.

That will produce

.class {
    …
    background-image: url(…),linear-gradient(to right,var(--tw-gradient-stops));

    background-position: 100% -50%,0 0;
    background-size: 64px,4px;
    …
}

[amalasyrafs]

this is great!

[Chhunneng]

How to use background with gradients and photo in tailwind.
Here is example of css

background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(photo.jpg);

[ppozniak]

This approach worked for me

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        hero: `
          url('/3px-tile.png'),
          linear-gradient(114.86deg, #2D0936 14.71%, #170312 78.23%)
        `,
      },
      backgroundSize: {
        hero: "200px, 100%",
      },
    },
  },
};

Usage

<div className="bg-hero">...</div>

Sadly backgroundRepeat doesn't seem to be available for multiple background images.
You can also add backgroundPosition to it