Menu
Why the following example shows the image in Firefox 4, but not in Chrome 10 and Internet Explorer 8?
HTML:
<div style="background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div> CSS:
div { width: 60px; height: 60px; border: 1px solid black; } Any ideas for workarounds?
908
To set a background image with inline styles in React: Set the style prop on the img element. Set the backgroundColor property in the style object. For example, backgroundImage: url(${MyBackgroundImage}) .
Make sure the image path is set correctly in the background-image url. Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.
Inline images come with their natural height, however, the container used for a background image requires some sort of height added to it for it to be even visual on the screen. Additionally, background images support several CSS properties that should always be placed with them.
As c-smile mentioned: Just need to remove the apostrophes in the url():
<div style="background-image: url(http://i54.tinypic.com/4zuxif.jpg)"></div> Demo here
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With