score:5

Accepted answer

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.com/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;
}

score:3

@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 combining 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;
}

Related Query

More Query from same tag