title: CSS calc() function
body: <p>I am using the latest version of Chrome but getting an "Invalid Property" error in Dev Tools when using the CSS calc() function.</p>
  
  <p>I have never really used it before so I am probably doing something wrong here although I can't see what. Hoping somebody can help me out with this.</p>
  
  <p>Here is the code I have.</p>
  
  <pre><code>padding-top: calc(980px / 1980px) * 100;
  </code></pre>
  
  <p>This is used to work out the padding-top on a background image so that I can have a 16:9 ratio on a responsive background image.</p>
  
  <p>The answer is 49.49%.</p>
  
  <p>The rest of the code for this particular section of my css is as follows in case something is required for the CSS to work this out.</p>
  
  <pre><code>.hero{
  /** Height 980px / Width 1980px * 100 -- Keeps image aspect at 16:9 **/
  padding-top: calc(( 980px / 1980px ) * 100);
  
  max-width:1980px;
  background:url('images/default-bg.jpg') no-repeat center center #fff;
  background-size:cover;
  </code></pre>
  
  <p>}</p>
  
  <p>Hope that makes sense. I had a look at Can I use and it doesn't seem to be an issue not using a vendor prefix. </p>
  
  <p>Another thing to note which might affect this is that I am using SCSS and Scout App. Should I just use SCSS calculations to do this instead?</p>
  
  <p>Just wanted to use this css function as I have never used it before.</p>
  
  <p>Thanks
  Dan</p>