Background Image not rendering in ReactJS

Viewed 1264

I need to have a background image on my website. I tried using the img tag and this one does work but because I am trying to use Tailwind to have my image styled I would much prefer using the background tag.

This is my current component's code:

import React from 'react';
import Header from '../components/Header';
import houseImg from '../imgs/house-backg-orig.jpg'
import HomePageDescr from '../components/HomePageDescr'

function Home() {

  return (
      
    <div className="">
      <Header/>
      <div style={{ backgroundImage: `url('${houseImg}')` }} />
      <HomePageDescr/>
    </div>
  );
}
export default Home;

Everything renders but the actual background. I tried looking at various things here but no questions/answers helped. Not adding require to the image, nothing.

Anyone encountered the same problem?

Thanks

1 Answers

You need to resize the div. Try setting height and width for the div

Related