React full image background-CodePudding

I know this is basic but I'm also a beginner trying to figure out things but it doesn't work out to be good.

How can I make this full image background in my react. I'm making a portfolio for my projects.

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body,
html {
    margin: 0;
    font-family: "Poppins", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
}

This is my index.css

And I have a component for the image inside my component

const background = {
    backgroundImage: `url(${Background})`,
    height: "100%",
    backgroundPosition: "center",
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover",
};

then I'm calling it here in my react component

return (
    <div style={background}>
        <h1> Hello </h1>
    </div>
)

But I'm getting this kind of result.

tried searching different approaches but it doesn't work :(

CodePudding user response：

I would use vh and vw to ensure your application fills the whole screen:

<div style="height:100vh;width:100vw">TEST</div>

In your case:

const background = {
    backgroundImage: `url(${Background})`,
    backgroundPosition: "center",
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover",
    height:100vh;
    width:100vw
};

If you just set height to 100% your background just fills the container (body).

CodePudding user response：

Try to use this background style for this:

const background = {
    backgroundImage: `url(${Background})`,
    height: "100vh",
    backgroundPosition: "center",
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover",
};

Percents it is relative unit, and it will take 100% of parent size. Vh (viewport height) it's unit, that based on the devices size, so 100 vh will set element size equal to full-screen height. About viewport:

https://www.hongkiat.com/blog/css-viewport-units-vw-vh-wmin-vmax/

https://www.w3schools.com/css/css_rwd_viewport.asp

CodePudding user response：

The issue is probably caused by you'r root element no being heigh enough.

You'll need to add some CSS to let the first element be large enough:

#app {
   height: 100%;
}

Small example:

const Example = () => {

    const Background = 'https://picsum.photos/200/300';

    const background = {
        backgroundImage: `url(${Background})`,
        height: "100%",
        backgroundPosition: "center",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
    };

    return (
        <div style={background}>
            <h1> Hello </h1>
        </div>
    )
}

ReactDOM.render(<Example />, document.getElementById("app"));

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    margin: 0;
    font-family: "Poppins", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
}

#app {
    height: 100%;
}

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<div id="app"></div>