Does calc() work for background size of image in CSS?

Question

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?

Answer 1

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