Setting a backgroundImage With React Inline Styles

Question

I'm trying to access a static image to use within an inline backgroundImage property within React. Unfortunately, I've run up dry on how to do this.

Generally, I thought you just did as follows:

import Background from '../images/background_image.png';

var sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};

class Section extends Component {
  render() {
    return (
      <section style={ sectionStyle }>
      </section>
    );
  }
}

This works for <img> tags. Can someone explain the difference between the two?

Example:

<img src={ Background } /> works just fine.

Thank you!

rgommezz · Accepted Answer · 2016-08-29T16:09:34.540

777

The curly braces inside backgroundImage property are wrong.

Probably you are using webpack along with image files loader, so Background should be already a String: backgroundImage: "url(" + Background + ")"

You can also use ES6 string templates as below to achieve the same effect:

backgroundImage: `url(${Background})`

edited Aug 29 '16 at 16:09

answered Aug 28 '16 at 22:55

rgommezz

13,536
2
18
23

I should have added that to my question. I do have a width and height set (100% / 400px respectively). The issue arising is due to how react handles static images I believe. – Mmm Donuts Aug 28 '16 at 23:23
Should one escape the '(", ')' and whitespace characters in the Background variable before concatenation as per https://www.w3.org/TR/CSS2/syndata.html#value-def-uri ? – qbolec Jul 12 '17 at 10:31
83

Full syntax should look like this: `style={{backgroundImage: "url(" + Background + ")"}}` – mike Oct 12 '17 at 18:37
4

just to expand @mike's comment, you need double curly braces because one is for React to enter is JS mode and one is to denote the new object. – Ciprian Tomoiagă Aug 20 '18 at 07:54
I am getting the error 'Section' is defined but never used' after giving this import Background from './background.jpg'; var sectionStyle = { width: "100%", height: "400px", backgroundImage: `url(${Background})` }; class Section extends Component { render() { return (

); } } – Pavanan M S Oct 22 '18 at 09:07
+1 to @mike answer. The accepted answer throws off my linter and keeps giving me grief with rando red squiggly lines that have been driving me crazy all day. – Tina Sep 25 '20 at 00:58

score 98 · Answer 2 · edited May 12 '19 at 08:05

98

Inline style to set any image full screen:

style={{  
  backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat'
}}

edited May 12 '19 at 08:05

Pavindu

2,684
6
44
77

answered Oct 12 '18 at 19:55

Hitesh Sahu

41,955
17
205
154

Thanks a bunch, this is what I was looking for – Prince Agrawal Aug 10 '20 at 14:00
import Background from '../images/background_image.png'; Followed by the answer here did solve my problem, together is the best answer right now. – Arka Mallick Jan 07 '21 at 14:15
import React, { useState, useEffect } from 'react'; import style from './style.module.css'; import authBg from '../../assets/Auth/authBg.png'; const Auth = () => { return (
daf
); } export default Auth – Chanrithisak Phok Sep 04 '22 at 11:27

score 71 · Answer 3 · answered Mar 17 '18 at 09:50

71

If you are using ES5 -

backgroundImage: "url(" + Background + ")"

If you are using ES6 -

backgroundImage: `url(${Background})`

Basically removing unnecessary curly braces while adding value to backgroundImage property works will work.

answered Mar 17 '18 at 09:50

Rushikesh Bharad

960
6
6

4

For me in ES6 it was `backgroundImage: \`url("${Background}")\``, as your ES6 example didn't work for me. – S.. Oct 07 '19 at 06:39
Hello Bharad, how would you go about it if you want to add more than one background image. Say for two images how would you do this? Thanks – On the way to success Jun 22 '20 at 04:40
2

@S.. Thanks, that helped me. I was stuck. – Utkarsh Nov 06 '20 at 16:29

score 36 · Answer 4 · edited May 12 '19 at 13:34

36

You can also bring the image into the component by using the require() function.

Note the two sets of curly brackets. The first set is for entering react mode and the second is for denoting object

edited May 12 '19 at 13:34

Pavindu

2,684
6
44
77

answered Mar 09 '18 at 20:30

Tricky

10,892
1
16
15

What if the image path is a web URL instead of a local path? Something like `https://images.com/myimage.png` – Aminu Kano Aug 02 '18 at 04:31
5

Ok I understand, when using web-based URL. I should just write `url(https://images.com/myimage.png)` – Aminu Kano Aug 02 '18 at 04:35

score 22 · Answer 5 · answered Aug 06 '20 at 10:16

22

It works for me:

  import Background from '../images/background_image.png';
    
  <div className=...
       style={{
              background: `url(${Background})`,
            }}
    >...</div>

answered Aug 06 '20 at 10:16

Detoner

514
1
7
15

score 18 · Answer 6 · answered Apr 01 '20 at 17:17

18

For me what worked is having it like this

style={{ backgroundImage: `url(${require("./resources/img/banners/3.jpg")})` }}

answered Apr 01 '20 at 17:17

eaglebearer

2,060
1
13
9

catphotos · Answer 7 · 2022-08-09T10:21:49.170

14

You can use Template literals (enclosed with back-tick: `...`) instead. For backgroundImage property like this:

backgroundImage: `url(${Background})`

edited Aug 09 '22 at 10:21

answered Nov 23 '18 at 05:27

catphotos

176
2
6

score 12 · Answer 8 · edited May 24 '21 at 11:36

12

For a local File in case of ReactJS. Try

import Image from "../../assets/image.jpg";

<div
style={{ backgroundImage: 'url(' + Image + ')', backgroundSize: 'auto' }}
>Hello
</div>

This is the case of ReactJS with inline styling where Image is a local file that you must have imported with a path.

edited May 24 '21 at 11:36

lys

949
2
9
33

answered Dec 04 '20 at 20:50

champion-runner

1,489
1
13
26

1

The properties are backgroundImage and backgroundSize in jsx – jpmc Apr 03 '21 at 06:50

score 6 · Answer 9 · answered Mar 21 '22 at 06:40

6

Change line 6 of your code from

  backgroundImage: "url(" + { Background} + ")"

to

  backgroundImage: "url(" + { Background.src } + ")"

and it will work.

answered Mar 21 '22 at 06:40

taotao

186
1
4

score 4 · Answer 10 · answered Jan 28 '20 at 15:47

4

try this:

style={{ backgroundImage: `url(require("path/image.ext"))` }}

answered Jan 28 '20 at 15:47

Hamza Khan

108
7

score 3 · Answer 11 · answered May 17 '22 at 09:55

3

updated to 17.05.22 instead:

backgroundImage: "url(" + { Background } + ")"

do:

backgroundImage: "url(" + Background + ")"

answered May 17 '22 at 09:55

Dmitry Sorokin

31
3

score 2 · Answer 12 · answered Jul 01 '20 at 11:14

2

try this it worked in my case

backgroundImage: `url("${Background}")`

answered Jul 01 '20 at 11:14

Saikiran Rudra

64
5

score 2 · Answer 13 · answered Feb 20 '21 at 01:01

2

Sometimes your SVG will be inlined by React so you need quotes around it:

     backgroundImage: `url("${Background}")`

otherwise it's invalid CSS and the browser dev tools will not show that you've set background-image at all.

answered Feb 20 '21 at 01:01

Curtis

2,486
5
40
44

score 1 · Answer 14 · edited Nov 18 '20 at 22:05

1

Copy the image to the React Component's folder where you want to see it.
Copy the following code:

<div className="welcomer" style={{ backgroundImage: url(${myImage}) }}></div>

Give a height to your .welcomer using CSS so that you can see your image in the desired size.

edited Nov 18 '20 at 22:05

Param Siddharth

858
2
7
20

answered Nov 18 '20 at 14:13

Mourad Mounim

11
1

score 1 · Answer 15 · answered Apr 17 '21 at 16:26

import React, { PureComponent } from 'react'
import logo from './logo.png';

class Home extends PureComponent {
    render() {
        return (
            <div>
                 <div
                    style={{
                        backgroundImage: `url("https://www.nicesnippets.com/image/imgpsh_fullsize.png")`, backgroundRepeat: 'no-repeat', width: '800px', height: '250px', color: 'blue'
                    }}>
                        Nice Snippets
                </div>
                    <hr />
                    <div
                        style={{
                            backgroundImage: `url(${logo})`, backgroundRepeat: 'no-repeat', width: '100%', height: '250px', color: 'blue'
                        }}>
                        Nice Snippets
                </div>
            </div>
        )
    }
}

export default Home

backgroundImage: `url("https://www.nicesnippets.com/image/imgpsh_fullsize.png")` or backgroundImage: `url(${logo})` — Mohammad Ali Abdullah, Apr 17 '21 at 16:27

score 1 · Answer 16 · answered Sep 27 '22 at 08:29

1

For ES6, please use

backgroundImage: `url("${Background}")

answered Sep 27 '22 at 08:29

Mujahidul Islam

265
4
8

You are missing the endind tick `\`` in `url(${Background})\``. – user31782 Aug 15 '23 at 10:48

score 0 · Answer 17 · answered Jul 19 '20 at 05:52

Just add required to file or url

<div style={
   {
      backgroundImage: `url(${require("./path_local")})`,      
   }
}
>

Or set in css base64 image like

div {
  background:
    url('data:image/gif;base64,R0lGODlhZQBhAPcAACQgDxMFABsHABYJABsLA')
    no-repeat
    left center;
}

You can use https://www.base64-image.de/ for convert

Ahmed Khalil · Answer 18 · 2021-01-09T17:04:34.107

0

You can try this with by adding backticks on whole url

style={{backgroundImage:url(${val.image || 'http://max-themes.net/demos/grandtour/upload/Tokyo_Dollarphotoclub_72848283-copy-700x466.jpg'} ) }}

edited Jan 09 '21 at 17:04

answered Jan 09 '21 at 16:59

Ahmed Khalil

1
2

score 0 · Answer 19 · answered Sep 17 '21 at 16:36

If you are using webpack you need to edit webpack.config.js and add this into it

module: {
  rules: [
 {
      test: /\.(png|jpe?g|gif)$/i,

     dependency: { not: ['url'] },
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192,
          },
        },
      ],
    },
  ],
}

if you use file-loader for rendering images you need to delete that like below:

    {
       test: /\.(png|jpe?g|gif)$/i,
       loader: 'file-loader',
    },

and in your css file instead of using background-image use background instead:

background: url(Background);

for more information about webpack with images see this also: https://v4.webpack.js.org/loaders/url-loader/

score 0 · Answer 20 · answered Oct 20 '21 at 14:34

0

This worked for me

style={{ backgroundImage: url(${require("../assets/pet4.jpeg").default}) }}

answered Oct 20 '21 at 14:34

Paul Jere

11
4

score -2 · Answer 21 · answered Nov 08 '19 at 11:29

-2

You Can try usimg

backgroundImage: url(process.env.PUBLIC_URL + "/      assets/image_location")

answered Nov 08 '19 at 11:29

Jamilur Rahman

69
2
12

This is not recommended since it will prevent webpack from knowing the asset. This will end in a cache miss if the react app is opened offline. – Thomas Kekeisen Mar 13 '20 at 13:14

Setting a backgroundImage With React Inline Styles

21 Answers21

Linked

Related