Images

Quick reference

• 00:05 Okay, so now I wanna talk about images and CSS.
• 00:08 So we're gonna use our hiking image again, and I've created a second image, hike2.
• 00:13 And I'll show you in just a second how I wanna deal with that.
• 00:15 So let's come into our responsive.html page and scroll down to our col- 9.
• 00:21 And let's give this a div with a class = "hike".
• 00:27 And we could just save that, and let's just come back here and
• 00:30 see I have created this hike class here.
• 00:33 And I set the background image too our hike.png, and the height to 300.
• 00:38 Now if we save this, come back and hit reload, you see boom,
• 00:41 this is our hiking image that we've seen many times before.
• 00:44 Just real quick here, I'm gonna put in hike2.
• 00:46 Save this, and you can see it's scaled, but
• 00:51 this is the image, it's just one of these guys.
• 00:53 In fact I can put background-repeat,
• 00:58 and then no repeat.
• 01:01 Save, come back here, this is our hike2 image, so it's just a smaller sized image.
• 01:06 So what am I going on about here?
• 01:08 So let's come back here and change this, save it, come back and hit reload.
• 01:12 Now if we resize this from mobile, you can see the image.
• 01:16 It sort of changes, it fits in here, but it gets all cropped weird, right?
• 01:22 And so, when you're dealing with images you're gonna have to play around and
• 01:25 do some weird things in order to get them to work right.
• 01:28 So one thing that I like to do is, sometimes you just need to
• 01:31 use different images, a different set of images, for your responsive website.
• 01:36 It's not always, but sometimes, you just do.
• 01:38 So that's what I'm gonna talk about for the rest of this video.
• 01:40 So how would we do this,
• 01:41 how would we show a different set of images based on responsive?
• 01:45 Well, we do it in our media query thing here, because we remember anything that
• 01:49 happens in here, is only gonna happen if the width of the screen is less than 768.
• 01:54 So let's come down here and let's create, or I should say let's recreate.
• 02:00 And I could just copy this guy right here, and paste, and let's change this to hike2.
• 02:07 And we're gonna have to do that background-repeat thing again,
• 02:11 cuz I don't want this repeating.
• 02:13 And let's change the- the height should be what?
• 02:17 I'm gonna keep the same 300 pixels.
• 02:21 Let's see what that does for us.
• 02:22 So if we come back here and click reload.
• 02:23 Now when it's normally sized, it looks the same,
• 02:26 it's the same hike1 picture there, our first hiking picture.
• 02:30 But if we start to resize this, boom, when it turns mobile, we get that second image.
• 02:35 And in fact, it is not supposed to do that.
• 02:37 So what did we do here?
• 02:38 Background-repeat, forgot the semicolon, boom.
• 02:42 So if we hit reload, give this another try, it just does this.
• 02:46 And we can style this, we could say give this
• 02:51 a background-position: center ;.
• 02:56 Come back here, hit reload.
• 02:58 Boom, now it's centered.
• 03:00 We could mess around with the size if we like, background-size,
• 03:06 give this 100%, 100%.
• 03:11 Save this, this is probably gonna stretch it a little bit and make it look, yeah,
• 03:15 kind of funny.
• 03:16 But you know, you have lots of options,
• 03:17 you can play around, eh, it don't look too bad.
• 03:19 The point being, you're gonna have to mess around with your images a little
• 03:22 bit when you're dealing with CSS.
• 03:24 That is definitely one way to do it, slapping in your CSS, however you wanna.
• 03:28 I put this in its own class, hike.
• 03:30 You can do the same thing with images if you wanted, and
• 03:32 then just have all images repeat, or whatever.
• 03:34 So, just a quick introduction to images and responsive design.
• 03:38 That's all for this video.

Lesson notes are only available for subscribers.