calc() is crashing IE 9 when set on background-position

Question

I'm using calc() to position an image 10px from the right of a responsive container. I have a declaration like so:

background-position: calc(100% - 10px) 6px;

Whenever I try to:

• load that CSS into the page normally or
• enter it via Developer Tools

IE 9 completely crashes. No errors in Developer Tools, just straight to crash. This works in all other (future) browsers but my goal is to support IE 9 as well.

calc() seems to work on other properties like margin and width just fine. Here is the full CSS trace of the related element:

Here it's set to 98%, but when I use calc on background-position-x (as shown above) IE 9 crashes.

Thank you!

Abraham

Just a shot in the dark here, but try background-position: calc(100% - 10px) calc(6px + 0);. – Tishtisha

Answer 1

As an alternative to calc(), you could use the top/right/bottom/left keywords to specify different edges (rather than the default top-left) from which to offset your background content.

background-position: right 10px top 6px; /* 10px from the right, 6px from the top */

http://www.w3.org/TR/css3-background/#the-background-position

If two values are given … the first represents the horizontal position … the second represents the vertical. … Values represent an offset of the top-left corner of the background image from the top-left corner of the background positioning area.

If four values are given, then each represents an offset and must be preceded by a keyword that specifies from which edge the offset is given.

If you prefer calc() but want to prevent older browsers from crashing, you could define a fallback value (calc() is not supported for background-position in IE9-).

background-position-x: 98%;
background-position-y: 6px;
background-position: calc(100% - 10px) 6px; 

Tamandua

Answer 2

Sort of a shot in the dark here. But maybe try:

background-position: expression(100% - 10px) 6px;

FYI: I am not very experienced with expression(). I have however used it in the past to accomplish a similar goal on a mobile browser. Maybe it will work for you in IE.

Existence

Answer 3

I found this article Positioning background from element’s bottom-right corner

So a solution for your problem will be something like this:

background-position: 6px right 10px;

Fp

Answer 4

Instead of using calc or an expression, what worked for me is using absolutely positioned elements and stretching the images using the left and right properties.

.bg_img{
  position:absolute;
  top:0;
  bottom:0;
  left:-10px;
  right:-10px;
}

The negative pixels aren't necessary in most cases, but for me that's what I was trying to achieve with the calc().

Hope this helps someone!

Coleman