Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed The CSS calc() Function!
You have completed The CSS calc() Function!
Preview
Learn how to use the CSS calc() function to position a background image inside a flexible container.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up