Set background image to full screen in Reactjs

Question

I'm trying to set a background image in React but it only covers about 75% of the height.

It seems that the component doesn't take up all of the height.

What's the solution?

In index.js:

ReactDOM.render(<Login />, document.getElementById('root'));

In index.css:

html, body, .Login-component {
  height: 100%;
}

In Login.js:

render() {
    return (
      <div className='Login-component'>
    );
}

In Login.css

.Login-component {
    background: url(../static/login-bg.jpg) no-repeat center center fixed;
  background-size: cover;
}

The end result: Screen shot

Questions that don't show what you have tried are too broad, there are many solutions to this problem. — Ruan Mendes, Jan 16 '18 at 19:32

score 48 · Answer 1 · answered Feb 08 '20 at 20:25

Use vh and vw properties:

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

score 26 · Accepted Answer · answered Jan 16 '18 at 20:17

Try using the specific property values.

In Index.css:

body, html {
    height: 100%;
    margin: 0;
}

In Login.css:

.Login-component {
    /* The image used */
    background-image: url(../static/login-bg.jpg);

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

score 17 · Answer 3 · answered Jun 08 '18 at 22:33

17

The image should be inside your src folder besides that, inside your component you do the following.-

const imgMyimageexample = require('../assets/imageexample.jpg');
const divStyle = {
  width: '88%',
  height: '800px',
  backgroundImage: `url(${imgMyimageexample})`,
  backgroundSize: 'cover'   <---- This is important
};

export default class Mycomponent extends React.Component {
  render() {
    return (
      <div className="cComponent" style={divStyle} >
        <h1 align="center">Some header example</h1>
      </div>
    );
  }
}

answered Jun 08 '18 at 22:33

Jorge Carretero

361
2
12

1

It won't work with the screen more than 800px, will it? – Yuki Tanaka Jul 01 '20 at 14:50
@YukiTanka maybe you can do a height: '100%' ? – Jorge Carretero Apr 23 '22 at 01:24

score 0 · Answer 4 · answered Jan 16 '18 at 19:27

0

While it is hard to troubleshoot without any code, check the root element to which your react component is being rendered to. Setting height: '100%' in the style of your component will be in the context of it's parent div.

answered Jan 16 '18 at 19:27

tay_thomp

245
2
12

score 0 · Answer 5 · answered Jan 16 '18 at 19:29

Edit the CSS.

This might be what you are looking for:

<Component style={{ minHeight: '100%' }} />

If you meant that the background image is not covering the whole height, then add a className to your component, import the CSS where you'll do something like this

marita-ca · Answer 6 · 2022-06-18T17:05:34.777

0

An answer by Jorge Carretero is helpful and in case it still doesn't work for you, try adding default

const imgMyimageexample = require('../assets/imageexample.jpg').default;
const divStyle = {
  backgroundImage: `url(${imgMyimageexample})`,
  backgroundSize: 'cover'   <---- This is important
};

edited Jun 18 '22 at 17:05

answered Jun 18 '22 at 16:35

marita-ca

1
1

score 0 · Answer 7 · answered Sep 10 '22 at 11:36

Full typescript solution:

import imgBG from "../assets/imgBG.jpg";

interface imgStyleType {
   backgroundImage: string;
   backgroundPosition: string;
   backgroundSize: string;
   backgroundRepeat: string;
   width: string;
   height: string;
}

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

export default function ImgBG() {
   return (
      <>
         <div style={imgStyle} />
      </>
   );
}

score -1 · Answer 8 · edited Jan 07 '23 at 09:56

-1

.Login-component{

    background-image:url(path) ;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
  
}

edited Jan 07 '23 at 09:56

Suraj Rao

29,388
11
94
103

answered Jan 07 '23 at 09:40

Shoeb Khan

1

2

Could you explain how this solves the problem, and possibly how it's different from the other answers? – DavidW Jan 07 '23 at 17:51

Set background image to full screen in Reactjs

8 Answers8