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

css background calc
SaurabhLP picture SaurabhLP · Jun 6, 2015 · Viewed 9.7k times · Source

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

connexo picture connexo · Jun 6, 2015

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

Related questions

Stretch and scale a CSS image in the background - with CSS only

I want that my background image stretch and scale depending on the browser viewport size. I've seen some questions on Stack Overflow that do the job, like Stretch and scale CSS background for example. It works well, but I want …

Read More
div background color, to change onhover

I'm trying to make a div's background color change on mouse over. the div {background:white;} the div a:hover{background:grey; width:100%; display:block; text-decoration:none;} only the link inside the div gets the background color. what could I …

Read More
How to get div height to auto-adjust to background size?

How do I get a div to automatically adjust to the size of the background I set for it without setting a specific height (or min-height) for it?

Read More