From b67aaa47c23a67757055e8c4cf9de80ed5250866 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Sat, 19 Jan 2019 07:19:58 -0500
Subject: [PATCH] Completely replace background image with IMG tag approach.

---
 packages/components/src/focal-point-picker/index.js   | 2 --
 packages/components/src/focal-point-picker/style.scss | 9 ++++-----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index 7bc825767ba7d8..904bfb13ceaa02 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/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 } ) }
diff --git a/packages/components/src/focal-point-picker/style.scss b/packages/components/src/focal-point-picker/style.scss
index 4c9abe009d9b71..732dc70a999615 100644
--- a/packages/components/src/focal-point-picker/style.scss
+++ b/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;
 	}
 }