1

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

9
  • instead of using pixels, try using calc(16em / 9em). Jun 13, 2017 at 10:48
  • Hi, I tried that too, but nothing happens and Dev Tools still says Invalid Property Value. Jun 13, 2017 at 10:53
  • if .hero is a full width element you could simply define height: 0; padding-bottom: 56.25% to create a 16:9 container. if not, then assign that style to its ::before pseudoelement Jun 13, 2017 at 10:55
  • I just wanted to see if there was a dynamic way to do this without hard coding the answer. Thought using calc() in this way if I changed the height or the width it would re-calculate the % value of the padding-bottom Jun 13, 2017 at 10:58
  • so you are still hardcoding the height or width Jun 13, 2017 at 10:59

5 Answers 5

1

You cannot divide by units, only by numbers.

3
  • I'm tried changing 980px / 1980px * 100% but still got errors. Jun 13, 2017 at 10:55
  • 2
    If it contained a valid code version, which would have taken you less than a minute to write, it would have been +1 from me. But in its current form, it's the perfect example of a bad answer. @DanielWinnard, this is what Lars means padding-top: calc((980px / 1980) * 100). And it's the correct answer. If you divide px/px your result remains unitless, right? Here's a simpler version: calc(98px / 19800)
    – tao
    Jun 13, 2017 at 11:11
  • @AndreiGheorghiu I’d say it’s a semi-perfect example of a bad answer as I could have just answered with the link to MDN, yet you’re right and got my upvote :)
    – Lars Beck
    Jun 13, 2017 at 11:20
0

You can get what you want by this....

padding-top: calc(980px / 1980 * 100);
0

You don't need to use px as unit at all. Dividing px/px will result in no unit so no point to put that into the calculation. Simply go with:

padding-top: calc(980 / 1980 * 100%);

I just tested and it works fine in Chrome.

7
  • This changes the expected output, by changing the unit from px to %. Most likely, it's not what the OP wants.
    – tao
    Jun 13, 2017 at 11:18
  • Expected answer IS in %. Quote: "The answer is 49.49%". With an explanation that this is for padding-top responsive aspect ratio trick, which totally makes sense to me. Jun 13, 2017 at 11:19
  • @AndreiGheorghiu you are wrong. The rule in my answer does work and properly sets element's padding-top to 49.49% of its width. You may want to read this question: stackoverflow.com/questions/1495407/…. This trick works for padding-top and padding-bottom alike. Also please stop tagging me in comments and then removing them. Jun 13, 2017 at 11:27
  • There's one thing I still do not get. Why not use padding-top: 49.49%;? At least it works in more browsers than calc() and the above method is still hard-coding, but using a more verbose syntax.
    – tao
    Jun 13, 2017 at 11:29
  • You would need to ask OP about that, it depends on your personal requiremens regarding browsers and code quality. It seems like all the modern browsers besides IE11 handle it fine: caniuse.com/#search=calc Jun 13, 2017 at 11:32
0

You are using

padding-top: calc(980px / 1980px) * 100);

Use following

padding-top: calc(980px / 1980 * 100);

calc guide

Posting a working example

.box {
  width:500px;
  height:500px;
  background:tomato;
  padding-top: calc(980px / 1980 * 100);
}
<div class="box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque molestiae, quos mollitia dolorum id eaque in repellendus? Quae itaque numquam ipsa quasi eos, ea ullam at vero perspiciatis velit? Nesciunt.
</p>
</div>

4
  • Hi, I tried this and I am still getting an error and nothing displaying. Jun 13, 2017 at 10:54
  • Try padding-top: calc(100% / 1980px * 100); at once to check still live error
    – LKG
    Jun 13, 2017 at 11:02
  • Yes I still get the error. I think I will have to concede and just do the calculation manually. Jun 13, 2017 at 11:08
  • check my update answer it's working fine in chrome use padding-top: calc(980px / 1980 * 100);
    – LKG
    Jun 13, 2017 at 11:35
0

Even though the calc() function allows using different units, you should divide by unitless numbers. For example:

width: calc(500px / 50 *2)

There is a great article explaining the calc() function here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.