How to center Data URI in background image? - css

Question

It seems that background-position/background-cover is not working with data URI as background images? What I have is a preview of images to be uploaded. To show those previews I am using JS to get the data URI into CSS background images, which I hope to center.
But I notice the following code does not work with a data URI
div {
width: 200px;
height: 200px;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRg...);
}
https://jsfiddle.net/7pfc2vLx/
UPDATE
I notice like many mentioned I am missing background-position in my above example. But seems like even with that it does not work when its an inline style?
<div id="profile-avatar" style="width: 200px; height: 200px; background-position: center center; background-size: cover; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAA
https://jsfiddle.net/7pfc2vLx/4/

Answer 1

If you want to Center an image then try JSfiddle
div {
width: 100%;
height: 200px;
display: block;
background-size: contain;
background-repeat: no-repeat;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/4QBsRXhpZgAASUkqAAgAAAAD…y5eKCQaVqJ0y7W7JJJ2b6cxwd3MlGwz9mN4vrwL6sTjY+BzMiXWzjSpa2fJRFOu/auHjYv/9k=);
background-position: center center;
}

Answer 2

Maybe I'm missing something in your question, but shouldn't you just add the position?
background-position: center;

Answer 3

Your background already fit the div and if you want to make sure it's in the centre of the div, add:
background-position:center center;
But seem nothing change, because your div is not center itself, so add:
margin:0 auto;
Now they all in center posistion. https://jsfiddle.net/7pfc2vLx/2/