background-position-x: not working in Internet Explorer

Question

On this page: https://www.kalimukti.com/membership-options the Facebook sign up button has a background image which is the big white F. In Chrome and Firefox it correctly positions to the left however in IE11 it is centered. Does anyone know how to position this to the left?

Here is the css:

url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHBhdGggc3Ryb2tlPSIjZmZmIiBkPSJNMTQgMjUgdiAtMTMgUSAxMyA2IDIxIDcuNSBNIDEwIDE0IEwgMjAgMTQiIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ZnPg==) left no-repeat

We also experience more and more styling issues with IE11. Looks to me like MS falls into the same pit it did before: trying to make everything a bit better whilst in reality annoying each and every person that has to deal with its products.... — arkascha, Mar 13 '16 at 10:47
Possible duplicate of [svg background image position is always centered in internet explorer, despite background-position: left center;](http://stackoverflow.com/questions/17944354/svg-background-image-position-is-always-centered-in-internet-explorer-despite-b) — Asons, Mar 13 '16 at 11:19
I checked out that other post and tried what they suggested but it hasn't helped. My element is an ss, rather than an svg so not sure if that makes a difference — simondlh, Mar 13 '16 at 18:10

score 0 · Accepted Answer · edited May 23 '17 at 12:23

0

Here is a workaround for IE11

.theChampFacebookLoginSvg {
  background: blue url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHBhdGggc3Ryb2tlPSIjZmZmIiBkPSJNMTQgMjUgdiAtMTMgUSAxMyA2IDIxIDcuNSBNIDEwIDE0IEwgMjAgMTQiIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ZnPg==') left no-repeat;
  width: 240px;
  height: 50px;
}

/* begin - fix for IE11 */
_:-ms-fullscreen, :root .theChampFacebookLoginSvg {
  background-position: -120px;
}
/* end - fix for IE11 */

<div class="theChampFacebookLoginSvg"></div>

Update

A second way would be to follow this post's accepted answer

svg background image position is always centered in internet explorer, despite background-position: left center;

edited May 23 '17 at 12:23

Community

1
1

answered Mar 13 '16 at 11:05

Asons

84,923
12
110
165

@simondlh I made an inline edit using dev.tools in IE11 and when I set the `background-position: -120px;` if left aligns, so then you missed something when you tried. – Asons Mar 13 '16 at 18:17
@simondlh I also updated my answer with the correct class used on the site, `theChampFacebookLoginSvg`, if you by accident used the previous one in my sample, which were for demo only. – Asons Mar 13 '16 at 18:21
Got it working now...I needed to put !important in there to override the other css rules. Thanks for your help – simondlh Mar 13 '16 at 18:45

score 0 · Answer 2 · answered May 05 '20 at 09:01

I found better solution if you don't know width of element.

Just set :before

.theChampFacebookLoginSvg {
  background: blue;
  width: 240px;
  height: 50px;
  position: relative;
  padding-left: 50px;
}

.theChampFacebookLoginSvg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 100%;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHBhdGggc3Ryb2tlPSIjZmZmIiBkPSJNMTQgMjUgdiAtMTMgUSAxMyA2IDIxIDcuNSBNIDEwIDE0IEwgMjAgMTQiIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ZnPg==') no-repeat left top;
}

<div class="theChampFacebookLoginSvg"></div>

background-position-x: not working in Internet Explorer

2 Answers2