CODEWITHSUNDEEP
javascriptcssreactjsbackground-image
Dharmesh
Dharmesh

Reputation: 6003

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

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 ?

enter image description here

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

Upvotes: 2

Views: 5406

Answers (2)

Brian Le
Brian Le

Reputation: 2686

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

Upvotes: 3

tnkh
tnkh

Reputation: 1839

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.

Upvotes: 0

Related Questions