title: how can i change my background_image in a div in react js
body: <p>I do a meteo application and i want to change my background with my city.</p>
  <p>my problem is i can change with the classic cssfile like:</p>
  <pre><code>
  body {
    font-family: 'montseratt', sans-serif;
    background-color:white;
    background-image: url('./assets/paris.jpg');
    background-repeat:repeat;
  
  }
  </code></pre>
  <p>but when i retire it and i try in a div like this it doesn't function:</p>
  <pre><code>    &lt;div style={{background_image: 'url(./assets/paris.jpg)'}}&gt;
  </code></pre>
  <p>i don't understand why.</p>
  <p>There is my entire code but i don't think it's useful</p>
  <pre><code>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(() =&gt; {
      const interval = setInterval(() =&gt; setTime(new Date().toLocaleString()), 1000);
      return () =&gt; {
        
        clearInterval(interval);
      };
    }, []);
    
     const sendtemp = (props) =&gt; {
      fetch('getmeteo/?city=' + props) 
      .then((response) =&gt; response.json())
      .then((responseData) =&gt; {
        responseData.temp -= 273.15
        responseData.temp = responseData.temp.toFixed(2)
        responseData.temp = responseData.temp + &quot;°C&quot;
        setWeather(responseData);
        const pro = props.toLowerCase()
        setFond(&quot;./assets/&quot; + pro + &quot;.jpg&quot;)
        const pop = pro.charAt(0).toUpperCase() + pro.substring(1)
  
        setCity(pop)
        setQuery('')
      })
    }
    const search = evt =&gt; {
      if (evt.key === &quot;Enter&quot;){
        setQuery('')
        sendtemp(query);
  
      }
    }
  
    
    return (
      &lt;div style={{background_image: 'url(./assets/paris.jpg)'}}&gt;
  
        
  
  &lt;main&gt;
        
          &lt;div className=&quot;search-box&quot;&gt;
            &lt;input
            type=&quot;text&quot;
            className=&quot;search-bar&quot;
            placeholder=&quot;Search...&quot;
          
            onChange={e =&gt;setQuery(e.target.value)}
            value = {query}
            onKeyPress={search}
            /&gt;
            
          &lt;/div&gt;
                &lt;div className=&quot;location&quot;&gt;
                {(time)}
          &lt;/div&gt;
          {weather.temp ? (
         &lt;div className=&quot;weather-box&quot;&gt;
          
         {weather.temp}
           &lt;/div&gt;
        ) : ( &lt;div&gt;&lt;/div&gt;)}
          
          &lt;div className=&quot;location&quot;&gt;
              {city}
          &lt;/div&gt;
  
          &lt;/main&gt;
     
      &lt;div&gt;
        
      &lt;/div&gt;
      &lt;/div&gt;
      
    
    );
  }
  </code></pre>
  <p>thanks for your answers</p>