レスポンシブの背景画像の特定の場所にpositionを合わせる

HTML

<div>
<p><img src="http://placehold.jp/50x50.png"></p>
</div>

SCSS

div {
	position: relative;
	min-height: 200px;
	background-image: url(http://placehold.jp/9999cc/333333/750x200.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	p {
		position: absolute;
		top: 50%;
		left: 50%;
    width: 30%;
    transform: translate(-50%, -50%);
    margin:0;
    max-width:180px;//最大画像サイズ
    min-width:50px;//最小画像サイズ
	}
  p img {
    width:100%;
  }
}