13

My question is very simple, does calc() work for background size of a background image in pure CSS...

Right now I am fixing a background image for responsive mobile view... I want the image to stay fixed in ratio of the screen but resize on any mobile screen...

I implemented this code, it's not working currently:

@media (max-width: 767px) { 
   body { 
      background-size: calc(100%-200px) auto; 
      background-repeat: repeat; 
   }    
}

Is it possible in pure CSS?

connexo
  • 53,704
  • 14
  • 91
  • 128
SaurabhLP
  • 3,619
  • 9
  • 40
  • 70
  • possible duplicate of [Why doesn't the CSS calc() function work for me in IE9 and Safari?](http://stackoverflow.com/questions/15108285/why-doesnt-the-css-calc-function-work-for-me-in-ie9-and-safari) – connexo Jun 06 '15 at 05:09

1 Answers1

16

Yes, it does work everwhere you could otherwise put numbers with units like %, em, rem, px, cm, vh etc.

I ran in to this as well: You must put a space before and after the -:

calc(100% - 200px)

I asked something similar here: Why is CSS calc(100%-250px) not working?

From the MDN docs:

Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.

Source: MDN

W3C Documentation

Community
  • 1
  • 1
connexo
  • 53,704
  • 14
  • 91
  • 128