How to set the height and width of background image inline style in react?

In React, one can create an object with styling information like background image, height, width, etc and refer to the object in the style attribute in the HTML element. Since the inline CSS is written in a JavaScript object, properties with two names, like background-color, must be written with camel case syntax.

Syntax :

class MyHeader extends React.Component {
  render() {
    const mystyle = {
      backgroundColor: "white",
     // CSS CODE
     };
    return (
      <div>
      <h1 style={mystyle}>Hello Style!</h1>
      // All styling define in mystyle 
      // object will applied to h1 element.
      </div>
    );
  }
}

Example 1: Set width and height of background image in div element to 100% and 200px .

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import './App.css';
  
function App() {
  const myStyle={
    backgroundImage:"url(" +
    width:'100%',
    height:'200px',
    };
  return (
    <div style={myStyle}>
     <h1 style={{color:'green'}}> 
       Geeks For Geeks 
     </h1>
     <p style={{color:'white'}}> 
       Set height and width of background
       image inline style react. 
     </p>
  
    </div>
  );
}
export default App;

chevron_right


Output: Here, all style define in myStyle object is applicable to the div element. One can check the width and height of the background image in the div element is 100% and 200px. 



Example 2: Set width and height of background image in div element to 20% and 200px .

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import './App.css';
  
function App() {
  const myStyle={
    backgroundImage:"url(" +
    width:'20%',
    height:'200px',
    };
  return (
    <div style={myStyle}>
     <h1 style={{color:'green'}}> 
       Geeks For Geeks 
     </h1>
     <p style={{color:'white'}}> 
       Set height and width of background image
       inline style react. 
    </p>
  
    </div>
  );
}
export default App;

chevron_right


Output: Here, all style define in myStyle object is applicable to the div element. One can check the width and height of the background image in the div element is 20% and 200px. 

Note: Similarly, one can define many other CSS styles in an object and call the object in the style attribute of the respective HTML element. All the CSS styles defined in the object will be applied to that particular HTML element as shown in the above example.

react-js-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.