horizontal centering a base64 background-image does not work

Question

I am trying to center that base64 background-image inside an horizontal rectangle div, and it just does not work.

I know it should be pretty trivial and I looked into many almost similar questions here, but no trick worked. The image is not centered horizontally and i do not know why. In fact, background-position does not seem to take any effect unless I use pixels explicitly.

you can see it in this playground:https://codesandbox.io/s/solitary-worker-vvrx4?file=/index.html

.container {
   background: red;
   width: 100px;
   height: 16px;
   background-image:url("data:image/svg+xml;base64,...");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
}


<div class="container"></div>

Could somebody please help? Thank you.

Answer 1

Looks like the problem is with your SVG. Made a fell changes on it and generated a new base64 that worked fine. I'm not so sure why this solved, though.

What I did:

• Changed transform="rotate(90 8 8)" to transform="rotate(90)"
• Added specific width and height properties width="160" height="160"

Heres the result

 .icon { background: red; width: 100px; height: 16px; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; }.icon--broken { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA4IDgpIiBmaWxsPSIjMzM5OWZmIj4KPGc+Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSIxMy45IiByPSIxLjciLz4KCTxwYXRoIGQ9Ik03LjgsMTEuOGMxLjIsMCwyLjEsMC45LDIuMSwyLjFDOS45LDE1LjEsOSwxNiw3LjgsMTZzLTIuMS0wLjktMi4xLTIuMUM1LjcsMTIuNyw2LjcsMTEuOCw3LjgsMTEuOHoiLz4KPC9nPgo8Zz4KCTxjaXJjbGUgY3g9IjcuOCIgY3k9IjcuOSIgcj0iMS43Ii8+Cgk8cGF0aCBkPSJNNy44LDUuOGMxLjIsMCwyLjEsMC45LDIuMSwyLjFDOS45LDkuMSw5LDEwLDcuOCwxMFM1LjcsOS4xLDUuNyw3LjlDNS43LDYuOCw2LjcsNS44LDcuOCw1Ljh6Ii8+CjwvZz4KPGc+Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSIyLjEiIHI9IjEuNyIvPgoJPHBhdGggZD0iTTcuOCwwQzksMCw5LjksMC45LDkuOSwyLjFjMCwxLjItMC45LDIuMS0yLjEsMi4xUzUuNywzLjMsNS43LDIuMUM1LjcsMC45LDYuNywwLDcuOCwweiIvPgo8L2c+Cjwvc3ZnPgo="); }.icon--fixed { background-image: url("data:image/svg+xml;base64,+CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMTMuOSIgcj0iMS43Ii8+Cgk8cGF0aCBkPSJNNy44LDExLjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSwxNS4xLDksMTYsNy44LDE2cy0yLjEtMC45LTIuMS0yLjFDNS43LDEyLjcsNi43LDExLjgsNy44LDExLjh6Ii8+CjwvZz4KPGc+Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSI3LjkiIHI9IjEuNyIvPgoJPHBhdGggZD0iTTcuOCw1LjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSw5LjEsOSwxMCw3LjgsMTBTNS43LDkuMSw1LjcsNy45QzUuNyw2LjgsNi43LDUuOCw3LjgsNS44eiIvPgo8L2c+CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMi4xIiByPSIxLjciLz4KCTxwYXRoIGQ9Ik03LjgsMEM5LDAsOS45LDAuOSw5LjksMi4xYzAsMS4yLTAuOSwyLjEtMi4xLDIuMVM1LjcsMy4zLDUuNywyLjFDNS43LDAuOSw2LjcsMCw3LjgsMHoiLz4KPC9nPgo8L3N2Zz4K"); }

 <div class="icon icon--broken"></div> <div class="icon icon--fixed"></div>

Answer 2

You have to increase the width of the container.

You can see it in this playground: https://codesandbox.io/s/admiring-monad-lwqlk?file=/index.html

Answer 3

The problem is not CSS but the SVG image inside the base64 string. When you open it, you find the following code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve" transform="rotate(90 8 8)" fill="#9c9c9c">
<g>
    <circle cx="7.8" cy="13.9" r="1.7"/>
    <path d="M7.8,11.8c1.2,0,2.1,0.9,2.1,2.1C9.9,15.1,9,16,7.8,16s-2.1-0.9-2.1-2.1C5.7,12.7,6.7,11.8,7.8,11.8z"/>
</g>
<g>
    <circle cx="7.8" cy="7.9" r="1.7"/>
    <path d="M7.8,5.8c1.2,0,2.1,0.9,2.1,2.1C9.9,9.1,9,10,7.8,10S5.7,9.1,5.7,7.9C5.7,6.8,6.7,5.8,7.8,5.8z"/>
</g>
<g>
    <circle cx="7.8" cy="2.1" r="1.7"/>
    <path d="M7.8,0C9,0,9.9,0.9,9.9,2.1c0,1.2-0.9,2.1-2.1,2.1S5.7,3.3,5.7,2.1C5.7,0.9,6.7,0,7.8,0z"/>
</g>
</svg>

Notice the transform="rotation(90 8 8)" attribute. It rotates the image by 90 degrees around the point [8,8]. The point should be the center of the image according to viewBox="0 0 16 16" but for some reason, the dimensions get broken, and an offset of 16 pixels is allocated on the left side of the image.

The simplest fix is to change the value of the transform attribute to rotation(90) . The fixed image in base64 is:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE2IDE2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNiAxNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHRyYW5zZm9ybT0icm90YXRlKDkwKSIgZmlsbD0iIzljOWM5YyI+CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMTMuOSIgcj0iMS43Ii8+Cgk8cGF0aCBkPSJNNy44LDExLjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSwxNS4xLDksMTYsNy44LDE2cy0yLjEtMC45LTIuMS0yLjFDNS43LDEyLjcsNi43LDExLjgsNy44LDExLjh6Ii8+CjwvZz4KPGc+Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSI3LjkiIHI9IjEuNyIvPgoJPHBhdGggZD0iTTcuOCw1LjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSw5LjEsOSwxMCw3LjgsMTBTNS43LDkuMSw1LjcsNy45QzUuNyw2LjgsNi43LDUuOCw3LjgsNS44eiIvPgo8L2c+CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMi4xIiByPSIxLjciLz4KCTxwYXRoIGQ9Ik03LjgsMEM5LDAsOS45LDAuOSw5LjksMi4xYzAsMS4yLTAuOSwyLjEtMi4xLDIuMVM1LjcsMy4zLDUuNywyLjFDNS43LDAuOSw2LjcsMCw3LjgsMHoiLz4KPC9nPgoJCjwvc3ZnPg==