I am using the latest version of Chrome but getting an "Invalid Property" error in Dev Tools when using the CSS calc() function.
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.
Here is the code I have.
padding-top: calc(980px / 1980px) * 100;
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.
The answer is 49.49%.
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.
.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;
}
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.
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?
Just wanted to use this css function as I have never used it before.
Thanks Dan
You cannot divide by units, only by numbers.