Preview
Video Player
00:00
00:00
Using calc() as Background Position Offsets
3:43Learn how to use the CSS calc() function to position a background image inside a flexible container.
Hey everyone.
0:01
In this video I'm gonna show you how to
use the CSS calc function to position
0:01
a background image inside
a flexible container.
0:06
You can follow along in workspaces by
clicking the launch workspace button on
0:08
this page.
0:12
So in the workspace, there's a simple
web page linked to a style sheet.
0:14
This index.html file contains a div
element with the class main-header.
0:19
And when you preview
this page in the browser,
0:25
you'll see that the header is styled with
a fluid width and a background image.
0:27
So in the style.css file, I'm going to
use the multiple background syntax to add
0:32
this rock.png image as a new
background image in main-header.
0:39
So I'm going to display the new image
as the topmost background layer.
0:46
So back in my style sheet,
in the background value,
0:51
I'll define the new image
before the header-bg image.
0:54
So I'll add a comma to
separate the values.
0:59
And before the comma,
I'll type the URL function and
1:02
the name of the image, which is rock.png.
1:07
So, next I want use
the background-position property
1:12
to position this new
image exactly 40 pixels
1:15
from the right side of the header and
30 pixels below the bottom.
1:20
When you set background position offsets,
1:26
the offsets are relative to the top and
left sides of the container.
1:28
So if I go back to my style sheet and
set rock.png's background position
1:33
to 1,000 pixels, 150 pixels,
1:39
the new background image is positioned
1,000 pixels from the left and
1:47
150 pixels from the top of main-header.
1:52
And if I resize the view port,
1:55
the fixed offsets do not adjust
according to the header's width.
1:57
So the rock image disappears.
2:02
Now I could use percentage values to
define a position that's approximately
2:04
40 pixels from the right and
30 pixels below the bottom edge.
2:09
But remember, you can use calc
wherever CSS link values are allowed.
2:13
So with calc, I can precisely position
the background image with offsets that
2:18
are relative to the right and
bottom sides of the header.
2:22
So back in my main-header rule,
as the background position for
2:25
rock.png, I'm going to write two calc
expressions to set new position offsets.
2:31
So I'll type the first value by writing
calc followed by such parentheses.
2:38
Then as the expression,
I'm going to write 100%- 40 pixels.
2:43
After this calc function,
I'll write a new calc function.
2:50
And as the expression,
I'm going to write 100% + 30 pixels.
2:54
All right, so let's take a look.
3:01
I'll save the style sheet.
3:02
And when I refresh the browser,
we can see how the rock image
3:04
is exactly 40 pixels from
the right edge of the header and
3:09
30 pixels below the bottom edge.
3:14
Now the image stays
relative to the bottom and
3:17
right sides no matter the width and
height of main-header.
3:21
Even if I go back to the style sheet and
change main-header's min-height
3:27
value to say 550 pixels,
3:32
notice how the bottom position remains
relative to its new height of 550 pixels.
3:37