From the course: CSS Shorts

Clip an image - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Clip an image

“

- [Male Instructor] Hi, this is Chris Converse, and in this episode, we'll use CSS to position, and crop, or, more technically, clip an image in a web page. This can be useful if you want to focus on a portion of an image, but don't want to create an entirely new graphic. So, if you'd like to follow along, download the exercise files and let's begin by opening the HTML file in a text editor. And so, once you have the HTML file open, you'll see up in the head area, we have a link to Style.CSS. We'll be opening this in a moment, and in the body area, inside of an article element, we have a heading, we have an image tag, and a few paragraph elements. So, it's this image tag that we're going to be positioning and then cropping with CSS. So, in order to do that, let's go back to the exercise files and let's open up Style.CSS in our text editor. And so now with this CSS file opened, the first thing we need to do is position the image tag. We can only clip items that have positioning properties. So, let's scroll down in the CSS, let's first find the role that targets the image right here. After width of 400 pixels, let's come in here and add another property of position. We'll set this to absolute. Then, on the next line, we'll set a right property of -80 pixels. Now, we're not going to set a top property, because I want the top property to be inherited based on where the image is placed in the HTML. So, the next property we're going to set is going to be the clip. So, in the next line, we're going to come in here and type "clip: ", we're going to clip a rectangle, so we'll type "rect", put in some parentheses, and then a semicolon. And now inside of the parentheses, we need to put our clipping properties. Now, the clip properties measure the image starting from the top left corner. So, we'll set the top property to 20 pixels, then we'll set the right property to 300 pixels, the bottom to 260, and then the left to 80. Then, if we subtract the left value from the right value and the top value from the bottom value, our resulting image will be 220 pixels by 240 pixels. So, now that we understand how the crop works, let's go back to the CSS and add in these properties. So, back in our CSS file with our cursor inside of the parentheses for the rectangle value, let's type 20 pixels, so "20px, ". That's the top property. Next is the right property, so "300px, 260px" for the bottom, ", " and 80 pixels for the left property. With these in place, we can hit Save, go back to the browser. We'll now see that the image is being clipped, and positioned. Now, you'll notice that the top property here is shifted down a little bit. We're letting the top value of the positioned item inherit its position based on where it shows up in the HTML which is before the first paragraph. However, we did clip the top property by 20 pixels. So, what we're going to do is come in here to the CSS. We're going to set a margin top property and set that to -20 pixels. Again, that will offset the rectangle top property of 20 pixels. Save our CSS, go back to the browser, and now the image will be positioned where we need it, and then the final thing that we'll need to do is create some room on the right-hand side of the content so that the picture's position won't cover up any text. So, back to the CSS. Let's go into the article element here, let's find the padding property and let's change the right property from 30 pixels to 255 pixels. Then we'll save that change, go back to the browser and hit reload, and the content will now provide enough room on the right-hand side to complete the layout. So, with some position properties as well as clipping properties, we're able to change the look of our image and position it on the page along with our content. And so, with that, I'll conclude this episode, and as always, thanks for watching.

Contents