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, Mar 19 '19 at 09:49
Possible duplicate: https://stackoverflow.com/questions/22887548/css-stretching-background-image-to-100-width-and-height-of-screen. Not closing as this is on CSS and this post is on react — Rajesh, Mar 19 '19 at 09:50
you can have a look over here a similar problem https://stackoverflow.com/a/39196525/8425297 — Narendra Chouhan, Mar 19 '19 at 09:50
@SergiuParaschiv I use backgroundSize so My image goes blur how to stop to blur background image — Dharmesh, Mar 19 '19 at 09: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, Mar 19 '19 at 09:57

Brian Le · Answer 1 · 2019-03-19T10:01:53.933

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 '19 at 10:01

answered Mar 19 '19 at 09:54

Brian Le

2,646
18
28

I refer your answer It works but My image goes blur how to stop to blur image – Dharmesh Mar 19 '19 at 09:57
1

@DDD That's because your image is to small. Perhaps you need to get a larger one – Brian Le Mar 19 '19 at 09:58

score 0 · Answer 2 · answered Mar 19 '19 at 09:58

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 '19 at 09:58

tnkh

1,749
2
14
30

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

2 Answers2