Does calc() work for background size of image in CSS?
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 ofcalc(50% -8px)
for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand ofcalc(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
Related videos on Youtube
SaurabhLP
From Lucknow, India. A Interactive Web Designer, HTML5 Developer, PHP Trainee, UI Developer. Currently in touch with HTML5, Jquery, Jquery Mobile, Responsive layout design with or without using framework. Command in HTML5, CSS3 with w3c standard. Basic knowledge of C, C++, Java, OOPs concepts.
Updated on September 15, 2022Comments
-
SaurabhLP over 1 year
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?