Problem with displaying an image as a background on a div in react

Question

I have this problem where the image just won't be displayed as the background of the div. even though the image is displayed normally when put in an image tag.

<div className="card text-dark " style={{ backgroundImage: `url(${mainImg})` }}> {/* <img className="card-img" src={mainImg} alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?" /> */} </div>

I have checked the css and the syntax with and various ai tools for help and just couldn't solve this problem.

i have changed the syntax to this: <div className="card text-dark" style={{ backgroundImage: "url(" + { mainImg } + ")" }}>

or this

<div className="card text-dark " style={{ backgroundImage: url(/${mainImg}) }}>

<div className="card text-dark " style={{ backgroundImage: url(./${mainImg}) }}>

still didn't work

Could you post more of the code please? Where are you getting the mainImg from? If you check the inspect element on the page, can you see the url to your image? — Insula
– Insula, Commented Jan 31, 2024 at 10:10

Harish Krishnan · Accepted Answer · 2024-01-31 10:12:36Z

<div className="card text-dark" style={{ backgroundImage: `url(${mainImg})`, height: '200px', width: '200px' }}> </div>

Try adding height and width ? Assuming your path should be right.

Parvez Ahmed · Accepted Answer · 2024-01-31 11:32:11Z

set your component this way

 import React from 'react'; const YourComponent = () => { const mainImg = 'https://example.com/image.jpg'; // Replace this with your image URL return ( <div className="card text-dark" style={{ backgroundImage: `url(${mainImg})`}}> </div> ); }; export default YourComponent;

Collectives™ on Stack Overflow

Problem with displaying an image as a background on a div in react

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related