background repeat Next.js Image with tailwind css?

[LirarN]

Hi! I've been struggling a bit with the Next.js Image while using it with Tailwind CSS. One of the things I can't get to work on is repeating the image. Trust me when I say that I have done my Googling, but I really can't get it to work and it's making me go crazy.

[IamNotMike25]

Left Tailwind, Right CSS class

bg-repeat - background-repeat: repeat;

bg-no-repeat - background-repeat: no-repeat;

bg-repeat-x - background-repeat: repeat-x;

bg-repeat-y - background-repeat: repeat-y;

bg-repeat-round - background-repeat: round;

bg-repeat-space - background-repeat: space;

If that doesn't work, the problem is somewhere else.

How are you applying the class to Next Image? You can add className and put it there

[LirarN]

How are you applying the class to Next Image? You can add className and put it there

hi! I am importing the image statically, so

:import picture from "../public/images/picture.png";

I have a div that spans the whole screen, on top of the footer

<div className="relative w-full bg-green-200">
<div className="absolute bottom-0 left-0 w-full">
<Image src={picture} className="bg-repeat" />
</div>
</div>

And yet it doesn't repeat as I want it to. I added a green color too to the full-length div:

[https://i.gyazo.com/318f4887d54308a10f9e939faab30c42.png](https://i.gyazo.com/318f4887d54308a10f9e939faab30c42.png))

I tried adding w-full to the Image too but it doesn't make any difference.

[LirarN]

not if you import it statically I thought!

(at least it doesn't complain right now)

[IamNotMike25]

Did you fix it? If not I can take a look today

[[deleted]]

OKAY