Does calc() work for background size of image in CSS?
background, calc, css
Solution
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
Problem
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?