The calc function performs calculations.
This function accepts an expression and calculates a property value.
This calc function calculates the background-position for the leaf icon.
Resizing the browser dynamically updates the 2 coordinate values.
<style>
.calc {
padding: 15px;
border: solid 1px teal;
height: 150px;
background-image: url("/img/css/leaf_icon.jpg");
background-repeat: no-repeat;
background-position: calc(100% - 20px) calc(100% - 20px);
}
</style>
<div class="calc">
The leaf is calculated to always be at the bottom right.
</div>
The calculated value can be used on any length, frequency, angle, time, percentage, number, or integer property value.
The calc function accepts any valid mathematical expression with addition, subtraction, multiplication, and division.
calc(expression);
| Value | Description |
|---|---|
expression |
A valid single mathematical expression. Addition, subtraction, multiplication, or division may be performed. |
This table shows when calc() support started for each browser.
 Chrome
|
26.0 | Mar 2013 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
9.0 | Mar 2011 |
 Opera
|
15.0 | Jun 2013 |
 Safari
|
7.0 | Oct 2013 |
