Completely replace background image with IMG tag approach.

packages/components/src/focal-point-picker/index.js

@@ -154,7 +154,6 @@ export class FocalPointPicker extends Component {
  const { instanceId, url, value, label, help, className } = this.props;
  const { bounds, isDragging, percentages } = this.state;
  const pickerDimensions = this.pickerDimensions();
- const containerStyle = { backgroundImage: `url(${ url })` };
  const iconCoordinates = {
  left: ( value.x * ( pickerDimensions.width - ( bounds.left * 2 ) ) ) + bounds.left,
  top: ( value.y * ( pickerDimensions.height - ( bounds.top * 2 ) ) ) + bounds.top,
@@ -172,7 +171,6 @@ export class FocalPointPicker extends Component {
  <BaseControl label={ label } id={ id } help={ help } className={ className }>
  <div
  className="component-focal-point-picker"
- style={ containerStyle }
  onMouseDown={ () => this.setState( { isDragging: true } ) }
  onDragStart={ () => this.setState( { isDragging: true } ) }
  onMouseUp={ () => this.setState( { isDragging: false } ) }

packages/components/src/focal-point-picker/style.scss

@@ -1,22 +1,21 @@
 $focalPointPickerSVG: "data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(1 1)' stroke='%23000' strokeWidth='2' fill='none' fillRule='evenodd'%3E%3Cellipse fill='%23fff' cx='11' cy='11.129' rx='9.533' ry='9.645' /%3E%3Cpath d='M0 11.13h22M10.945 22.347V.09' strokeLinecap='square' /%3E%3C/g%3E%3C/svg%3E";
 
 .component-focal-point-picker {
+ align-items: center;
  background-color: transparent;
- background-position: center;
- background-repeat: no-repeat;
- background-size: contain;
  border: 1px solid $light-gray-500;
  cursor: pointer;
- display: block;
+ display: flex;
  height: 200px;
+ justify-content: center;
  position: relative;
  width: 100%;
  img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
- opacity: 0.1;
  width: auto;
+ user-select: none;
  }
 }