I have a div that has a decently long list of styles that would look ridiculous to apply inline, however, the div takes a parameter of a background image url that will change upon updating state.

Styled inline, my element looks like this:

      <div style={{width: 55,
                  height: 55,
                  position: 'fixed',
                  borderRadius: '50%',
                  bottom: 130,
                  zIndex: 200,
                  backgroundImage: `url(${this.state.avatar})`}}>

However, when I do this, my background image disappears pletely:

<div className="avatar" style={{backgroundImage: `url(${this.state.avatar})`}}>

What is the fix here?

I have a div that has a decently long list of styles that would look ridiculous to apply inline, however, the div takes a parameter of a background image url that will change upon updating state.

Styled inline, my element looks like this:

      <div style={{width: 55,
                  height: 55,
                  position: 'fixed',
                  borderRadius: '50%',
                  bottom: 130,
                  zIndex: 200,
                  backgroundImage: `url(${this.state.avatar})`}}>

However, when I do this, my background image disappears pletely:

<div className="avatar" style={{backgroundImage: `url(${this.state.avatar})`}}>

What is the fix here?

• javascript
• html
• css
• reactjs

• does .avatar class has width and height specified? – Varinder Commented Feb 22, 2018 at 0:49
• You are adding quotes to the url which they shouldn't have. I would try removing those first. Secondly inline styles are the devil. You should not be adding them in the html as a rule of thumb. Why not add a style sheet? – RoboYak Commented Feb 22, 2018 at 0:49
• 1 @ElijahTate OP has a conditional backgroundImage – Anthony Commented Feb 22, 2018 at 0:51
• That's exactly my point. "avatar" is defined in the stylesheet but the background image url will be updated upon state change. Nothing wrong with the quotes, they work just fine inline and this is the proper ES6 way of doing things. The problem is using the both together. – Jessie Richardson Commented Feb 22, 2018 at 0:51
• @varinder yes, .avatar has all the styles that were inline in the previous example. – Jessie Richardson Commented Feb 22, 2018 at 0:53

2 Answers 2

I created a sample project with create-react-app and used the following code, it's working for me:

App.js:

import React, {Component} from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {avatar: 'https://www.gstatic./webp/gallery3/1.png'}
  }

  render() {
    return (
      <div className="avatar" style={{backgroundImage: `url(${this.state.avatar})`}}>
        something here...
      </div>
    );
  }
}

export default App;

And the App.css:

.avatar {
  width: 500px;
  height: 500px;
  position: fixed;
  border-radius: 50%;
  bottom: 130px;
  z-index: 200;
}

@salman.zare 's answer is 100% correct to the question I had posted, however, the problem I had turned out not to have anything to do with bining a className and an inline style. The issue was that my div container was too small for the image, 50px. Here is was I added to make it work: background-size: contain;

So:

.avatar {
  width: 50px;
  height: 50px;
  position: fixed;
  border-radius: 50%;
  bottom: 130px;
  z-index: 200;
  background-size: contain;
}

This also works and will not cut-off the bottom of the image if using no-repeat: background-size: 100% 100%;

.avatar {
  width: 55px;
  height: 55px;
  position: fixed;
  border-radius: 50%;
  bottom: 130px;
  z-index: 200;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}