0

The structure is:

<div className="d-flex flex-column">
  <div>
     Text
  </div>
  <div style={{ backgroundImage: 'url(...)' }}>
  </div>
</div>

Url is working. Div exists, but image not showing When I use flex-row it works

Danabek Duisekov
  • 315
  • 5
  • 12
  • Give the div height and width to see if the image appears – Andus Feb 19 '20 at 03:30
  • @Andus it appears, if i do width 100% height 100%, it cuts the height of image – Danabek Duisekov Feb 19 '20 at 03:35
  • div cannot visually seen if there's no explicit height/width itself or in its children alone, since you see your image now, you can use `object-fit: contain` or `object-fit: cover` to solve that, according to your preference – Andus Feb 19 '20 at 03:38
  • May be this could help https://stackoverflow.com/questions/39195687/setting-a-backgroundimage-with-react-inline-styles – Awais Feb 19 '20 at 07:33

1 Answers1

0

add two more styles background-size: contain;background-repeat: no-repeat;

<div class="d-flex flex-column">
  <div>
     Text
  </div>
  <div style="background: url(https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png);background-size: contain;background-repeat: no-repeat;">
  <br><br><br><br>
  </div>
</div>
Znaneswar
  • 3,329
  • 2
  • 16
  • 24