Menu
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:
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!
850
The four-value syntax for background-position You combine length values with any of top/right/bottom/left keywords (not center). So for our example: background-position: right 20px bottom 10px; Using this, you can offset a background-image from any of the four corners of an element.
The default values are 0 0 . This places your background image at the top-left of the container. Length values are pretty simple: the first value is the horizontal position, second value is the vertical position. So 100px 5px will move the image 100px to the right and five pixels down.
Keep in mind that you can also use the css :after selector to append a element with a background image to the right of another element. From there on, you could give it negative margins to place it where you want it to be. It's a pretty clean solution if you just want to append a non-repeating image to the right.
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;
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.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
