Using calc() as Background Position Offsets3:43 with Guil Hernandez
Learn 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
You need to sign up for Treehouse in order to download course files.Sign up