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>

backgroundSize, not backgroundPosition. This is mainly about not knowing which CSS rule to use, has nothing to do with React. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Mar 19, 2019 at 9:49
Possible duplicate: stackoverflow.com/questions/22887548/…. Not closing as this is on CSS and this post is on react — Rajesh Dixit
– Rajesh Dixit, Commented Mar 19, 2019 at 9:50
you can have a look over here a similar problem stackoverflow.com/a/39196525/8425297 — Narendra Chouhan
– Narendra Chouhan, Commented Mar 19, 2019 at 9:50
@SergiuParaschiv I use backgroundSize so My image goes blur how to stop to blur background image — Dharmesh
– Dharmesh, Commented Mar 19, 2019 at 9:55
@DDD, is it blur because your image is too small to take the cover size or do you have a blur effect in your image (photoshop or CSS property) ? — Bambou
– Bambou, Commented Mar 19, 2019 at 9:57

Brian Le · Accepted Answer · 2019-03-19 10:01:53Z

3

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

edited Mar 19, 2019 at 10:01

answered Mar 19, 2019 at 9:54

Brian Le

2,69621 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dharmesh Over a year ago

I refer your answer It works but My image goes blur how to stop to blur image

Brian Le Over a year ago

@DDD That's because your image is to small. Perhaps you need to get a larger one

tnkh · Accepted Answer · 2019-03-19 09:58:31Z

0

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.

answered Mar 19, 2019 at 9:58

tnkh

1,8493 gold badges20 silver badges35 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related