CODEWITHSUNDEEP
reactjstailwind-css
samuel potter
samuel potter

Reputation: 209

Background doesn't resize in responsive tailwindcss

I'm busing tailwindcss for my css. So for this I defined the image inside the tailwind config. Then I applied a cover on it but the image doesn't scale when I change the size of the screen. I thought by adding max-w-full min-h-full would fixe the problem but nothing.

import React from 'react'
import { CountdownEvent } from './CountdownEvent'
import { CarouselSaf } from './CarouselSaf'
import { Navbar } from './Navbar'

export const Home = () => {
    return (
        <section className="h-screen">
            <div className="bg-safthon bg-no-repeat bg-cover max-w-full min-h-full">
                <Navbar />
                <div className="flex h-screen items-center">
                    <CountdownEvent />
                </div>
            </div>
        </section>
    )
}

Upvotes: 1

Views: 2130

Answers (1)

Digvijay
Digvijay

Reputation: 8967

Try to keep it simple. Check this demo.

<div class="min-h-screen max-h-screen bg-cover bg-center bg-no-repeat" 
style="background-image: url('https://i.ytimg.com/vi/odM92ap8_c0/maxresdefault.jpg')">
</div>

Upvotes: 2

Related Questions