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-29 16:09:34Z

813

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, 2016 at 16:09

answered Aug 28, 2016 at 22:55

rgommezz

14k2 gold badges20 silver badges23 bronze badges

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

6 Comments

Kris Over a year ago

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.

qbolec Over a year ago

Should one escape the '(", ')' and whitespace characters in the Background variable before concatenation as per w3.org/TR/CSS2/syndata.html#value-def-uri ?

mike Over a year ago

Full syntax should look like this: style={{backgroundImage: "url(" + Background + ")"}}

Ciprian Tomoiagă Over a year ago

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.

Pavanan M S Over a year ago

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 ( <section style={ sectionStyle }> </section> ); } }

|

Pavindu · Accepted Answer · 2019-05-12 08:05:46Z

104

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, 2019 at 8:05

Pavindu

3,1338 gold badges54 silver badges91 bronze badges

answered Oct 12, 2018 at 19:55

Hitesh Sahu

45.6k18 gold badges217 silver badges160 bronze badges

2 Comments

Arka Mallick Over a year ago

import Background from '../images/background_image.png'; Followed by the answer here did solve my problem, together is the best answer right now.

Chanrithisak Phok Over a year ago

import React, { useState, useEffect } from 'react'; import style from './style.module.css'; import authBg from '../../assets/Auth/authBg.png'; const Auth = () => { return ( <div style={{ backgroundImage: "url(" + authBg + ")", backgroundPosition: 'center', backgroundSize: 'cover', backgroundRepeat: 'no-repeat', height: '100vh', width: '100vw' }}> daf </div> ); } export default Auth

Rushikesh Bharad · Accepted Answer · 2018-03-17 09:50:48Z

73

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, 2018 at 9:50

Rushikesh Bharad

1,0107 silver badges6 bronze badges

2 Comments

S.. Over a year ago

For me in ES6 it was backgroundImage: `url("${Background}")`, as your ES6 example didn't work for me.

On the way to success Over a year ago

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

Mattia Righetti · Accepted Answer · 2023-09-05 02:15:05Z

40

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

<div style={{ backgroundImage: `url(require("images/img.svg"))` }}>

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

edited Sep 5, 2023 at 2:15

Mattia Righetti

1,3802 gold badges23 silver badges32 bronze badges

answered Mar 9, 2018 at 20:30

Tricky

11.6k1 gold badge19 silver badges15 bronze badges

2 Comments

Aminu Kano Over a year ago

What if the image path is a web URL instead of a local path? Something like https://images.com/myimage.png

Aminu Kano Over a year ago

Ok I understand, when using web-based URL. I should just write url(https://images.com/myimage.png)

Detoner · Accepted Answer · 2020-08-06 10:16:36Z

24

It works for me:

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

answered Aug 6, 2020 at 10:16

Detoner

6041 gold badge9 silver badges17 bronze badges

Comments

brianokinyi · Accepted Answer · 2020-04-01 17:17:06Z

18

For me what worked is having it like this

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

answered Apr 1, 2020 at 17:17

brianokinyi

2,5381 gold badge16 silver badges9 bronze badges

Comments

catphotos · Accepted Answer · 2022-08-09 10:21:49Z

15

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

backgroundImage: `url(${Background})`

edited Aug 9, 2022 at 10:21

answered Nov 23, 2018 at 5:27

catphotos

1862 silver badges6 bronze badges

Comments

lys · Accepted Answer · 2021-05-24 11:36:19Z

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, 2021 at 11:36

lys

1,0593 gold badges15 silver badges37 bronze badges

answered Dec 4, 2020 at 20:50

champion-runner

1,6771 gold badge17 silver badges27 bronze badges

1 Comment

jpmc Over a year ago

The properties are backgroundImage and backgroundSize in jsx

taotao · Accepted Answer · 2022-03-21 06:40:37Z

6

Change line 6 of your code from

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

to

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

and it will work.

answered Mar 21, 2022 at 6:40

taotao

1861 silver badge4 bronze badges

Comments

Hamza Khan · Accepted Answer · 2020-01-28 15:47:15Z

4

try this:

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

answered Jan 28, 2020 at 15:47

Hamza Khan

1087 bronze badges

Comments

Mattia Righetti · Accepted Answer · 2023-09-04 17:31:17Z

4

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.

edited Sep 4, 2023 at 17:31

Mattia Righetti

1,3802 gold badges23 silver badges32 bronze badges

answered Feb 20, 2021 at 1:01

Curtis

2,5455 gold badges42 silver badges45 bronze badges

1 Comment

cfranklin Over a year ago

thanks, tried a few on this page and this answer worked for me

Dmitry Sorokin · Accepted Answer · 2022-05-17 09:55:52Z

3

updated to 17.05.22 instead:

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

do:

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

answered May 17, 2022 at 9:55

Dmitry Sorokin

313 bronze badges

Comments

Saikiran Rudra · Accepted Answer · 2020-07-01 11:14:57Z

2

try this it worked in my case

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

answered Jul 1, 2020 at 11:14

Saikiran Rudra

645 bronze badges

Comments

Mujahidul Islam · Accepted Answer · 2022-09-27 08:29:52Z

2

For ES6, please use

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

answered Sep 27, 2022 at 8:29

Mujahidul Islam

6239 silver badges10 bronze badges

1 Comment

user31782 Over a year ago

You are missing the endind tick ` in url(${Background})`.

Param Siddharth · Accepted Answer · 2020-11-18 22:05:35Z

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, 2020 at 22:05

Param Siddharth

9982 gold badges9 silver badges20 bronze badges

answered Nov 18, 2020 at 14:13

Mourad Mounim

111 bronze badge

Comments

Mohammad Ali Abdullah · Accepted Answer · 2021-04-17 16:26:25Z

1

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

answered Apr 17, 2021 at 16:26

Mohammad Ali Abdullah

3312 silver badges10 bronze badges

1 Comment

Mohammad Ali Abdullah Over a year ago

backgroundImage: url("https://www.nicesnippets.com/image/imgpsh_fullsize.png") or backgroundImage: url(${logo})

liuspatt · Accepted Answer · 2020-07-19 05:52:44Z

0

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

answered Jul 19, 2020 at 5:52

liuspatt

214 bronze badges

Comments

Ahmed Khalil · Accepted Answer · 2021-01-09 17:04:34Z

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 9, 2021 at 17:04

answered Jan 9, 2021 at 16:59

Ahmed Khalil

12 bronze badges

Comments

Ali Alavizadeh · Accepted Answer · 2021-09-17 16:36:54Z

0

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/

answered Sep 17, 2021 at 16:36

Ali Alavizadeh

1614 silver badges6 bronze badges

Comments

Mattia Righetti · Accepted Answer · 2023-09-04 16:31:11Z

0

This worked for me

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

edited Sep 4, 2023 at 16:31

Mattia Righetti

1,3802 gold badges23 silver badges32 bronze badges

answered Oct 20, 2021 at 14:34

Paul Jere

114 bronze badges

Comments

Mohamed El Masry · Accepted Answer · 2024-02-01 22:55:30Z

0

if you want to use backgroundImage: url() to display an image you have two ways

1- if the image path include spaces or special chars use this
backgroundImage: url("${props.img}"),

2- if the image path doesn't include any spaces or special chars use this backgroundImage: url(${props.img}),

answered Feb 1, 2024 at 22:55

Mohamed El Masry

11 bronze badge

Comments

harsh yadav · Accepted Answer · 2024-05-19 04:24:43Z

0

//first import the image import heroImg from '../src/image/heroImg.png'

//then use in div inside style =

hello world

answered May 19, 2024 at 4:24

harsh yadav

1

Comments

Jamilur Rahman · Accepted Answer · 2019-11-08 11:29:49Z

-2

You Can try usimg

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

answered Nov 8, 2019 at 11:29

Jamilur Rahman

692 silver badges14 bronze badges

1 Comment

Thomas Kekeisen Over a year ago

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.

Collectives™ on Stack Overflow

Setting a backgroundImage With React Inline Styles

23 Answers 23

6 Comments

2 Comments

2 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

23 Answers 23

6 Comments

2 Comments

2 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related