Clever Geek Handbook

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

My question is very simple, works calc()

for the background of a background image in pure CSS ...

I am currently fixing the background image for a responsive mobile view ... I want the image to remain fixed in the aspect ratio but resize on any mobile screen ...

I have implemented this code, it doesn't work currently:

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

Is this possible in pure CSS?

+3


source to share


1 answer


Yes, it works wherever you could put numbers with units like%, em, rem, px, cm, vh, etc.

I ran to this too: you have to put a space before and after -

:

calc(100% - 200px)

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



From MDN docs:

Note. +

And operators -

must always be surrounded by spaces. For example, the operand calc(50% -8px)

will be parsed as a percentage, followed by a negative length, an invalid expression, while the operand calc(50% - 8px)

is a percentage followed by a minus sign and length. Moreover, it is calc(8px + -50%)

considered as followed by a plus sign and a negative percentage. *

and /

operators do not need a space, but adding it for consistency is permitted and recommended.

Source: MDN

W3C Documentation

+5


source






More articles:


All Articles