Question 189216 in CSS Question posted in
Some basic documentation can be found here.

Trying to set a background image to a section using tailwind css and next js(typescript)

I’ve tried different solutions I found here on Stackoverflow but no luck in adding a background image to a section. Here’s where I’m currently at.

import Image from '../../public/images/header2.jpg';
  
  const Home: React.FC = () => {
  
    return (
        <main className="super-donnie-bg-slate">
            <section id="first" className="bg-no-repeat bg-bottom bg-cover px-4 md:px-8" style={{ backgroundImage:`url(${Image})`,backgroundRepeat:"no-repeat" }}>
                <div className="container max-w-xs w-full md:max-w-sm lg:max-w-md xl:max-w-lg mx-auto pt-24 pb-96 "><img className="mb-8 max-w-full w-64 sm:w-full mx-auto" src="/images/fungifimage.gif" alt="Super donnie"></img>
                    <div className="mb-8">
                        <div className="super-donnie-text-yellow flex justify-between w-full mb-4"></div>
                        
                    </div>
                    <p className="text-center text-2xl leading-tight super-donnie-font-press-start-2p ">text here.</p>
                
                </div>
            </section>

I can get an image up as you can see from the image inserted in the div but setting a background image in the section, no luck.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    found a solution. add the images in the tailwind.config.js file like so,

    backgroundImage: {
        'hero' : "url('../public/images/header2.jpg')",
        'basic-bg' : "url('../public/images/bg-basic.jpg')",
        'team-bg' : "url('../public/images/bg-team.jpg')"
      }

  2. 0

    You can use className from tailwind css and must width and height and close tag img in the first tag

    bg-[url(‘/img/hero-pattern.svg’)]

    <div class="bg-[url('/img/hero-pattern.svg')]">
  <!-- ... -->
</div>

    If you need to use a one-off aspect-ratio value that doesn’t make sense to include in your theme

    aspect-[4/3]

    Here your code

           <section id="first" className="bg-cover px-4 md:px-8   bg-[url(`${Image}`)]  bg-no-repeat     aspect-[4/3] w-full" >
            <div className="container max-w-xs w-full md:max-w-sm lg:max-w-md xl:max-w-lg mx-auto pt-24 pb-96  aspect-[4/3] "><img className="mb-8 max-w-full w-64 sm:w-full mx-auto" src="/images/fungifimage.gif" alt="Super donnie"/>
                <div className="mb-8">
                    <div className="super-donnie-text-yellow flex justify-between w-full mb-4"></div>
                    
                </div>
                <p className="text-center text-2xl leading-tight super-donnie-font-press-start-2p ">text here.</p>
            
            </div> </section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search