How To Set The Height And Width Of Background Image Inline Style In React?

In React, while handling styles dynamically you might encounter setting a background image with specific dimensions using inline styles. While CSS stylesheets are generally preferred for styling, there are cases where inline styles make more sense, such as when you need to apply dynamic values or work within a component-based approach.

In this article, we will cover how to set the height and width of a background image using inline styles in React. We will explore several options to ensure your background image appears as desired, whether you're working with fixed dimensions or responsive design.

Understanding Inline Styles in React

In React, you can apply styles directly to elements using the style attribute, which expects an object of camel-cased CSS properties. Inline styles are written in JavaScript, and React automatically applies the styles when the component renders.

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 the width and height of the background image in the div element to 100% and 200px.

//APp.js

import React from 'react';
import './App.css';

function App() {
    const myStyle = {
        backgroundImage: "url(" +
            "https://media.geeksforgeeks.org/wp-content/uploads/20241003141922/background.jpg" + ")",
        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;

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 .

//App.js

import React from 'react';
import './App.css';

function App() {
    const myStyle = {
        backgroundImage: "url(" +
            "https://media.geeksforgeeks.org/wp-content/uploads/20241003141922/background.jpg" + ")",
        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;

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.