Hago una aplicación meteorológica y quiero cambiar mi fondo con mi ciudad.

mi problema es que puedo cambiar con el archivo css clásico como:

 body { font-family: 'montseratt', sans-serif; background-color:white; background-image: url('./assets/paris.jpg'); background-repeat:repeat; }

pero cuando lo retiro y lo intento en un div como este no funciona:

 <div style={{background_image: 'url(./assets/paris.jpg)'}}>

no entiendo porque

Hay mi código completo, pero no creo que sea útil.

 function Accueil() { const [query, setQuery] = useState(''); const [weather, setWeather] = useState({}); const [time, setTime] = useState(Date.now()); const [city, setCity] = useState('') const [fond, setFond] = useState(('')) // Similar to componentDidMount and componentDidUpdate: useEffect(() => { const interval = setInterval(() => setTime(new Date().toLocaleString()), 1000); return () => { clearInterval(interval); }; }, []); const sendtemp = (props) => { fetch('getmeteo/?city=' + props) .then((response) => response.json()) .then((responseData) => { responseData.temp -= 273.15 responseData.temp = responseData.temp.toFixed(2) responseData.temp = responseData.temp + "°C" setWeather(responseData); const pro = props.toLowerCase() setFond("./assets/" + pro + ".jpg") const pop = pro.charAt(0).toUpperCase() + pro.substring(1) setCity(pop) setQuery('') }) } const search = evt => { if (evt.key === "Enter"){ setQuery('') sendtemp(query); } } return ( <div style={{background_image: 'url(./assets/paris.jpg)'}}> <main> <div className="search-box"> <input type="text" className="search-bar" placeholder="Search..." onChange={e =>setQuery(e.target.value)} value = {query} onKeyPress={search} /> </div> <div className="location"> {(time)} </div> {weather.temp ? ( <div className="weather-box"> {weather.temp} </div> ) : ( <div></div>)} <div className="location"> {city} </div> </main> <div> </div> </div> ); }

Gracias por tus respuestas