How to set a full background image in CSS using reactjs style?

Question

Here I have one div This div image I want to set on whole background but it not set full background(see below screenshot). My project is using reactjs. How to set Image in whole background ?

<div
   style={{
      backgroundImage: `url(${defaultImages.backgroundOfImage})`,
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'cover',
   }}
  >
</div>

Answer 1

The CSS property you are looking for is background-size , not background-position . The snippet that I normally use for doing this is:

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-image: url(path/to/image);

Or with React

<div style={{
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: 'center',
  backgroundImage: `url(${pathToImage})`,
}} />

Edit: This is probably out of the scope of the question, but I suggest you declare the style object somewhere else and import it each time you want to have the same background effect for reusability's sake

Answer 2

This has nothing to do with ReactJS, but merely CSS issue. You should use background-size:cover instead of background-position since background position property sets the starting position of a background image, but not setting the size of image.