This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Code Demo: Background Images" Lesson
[00:00:00]
>> Jen: So let's go ahead and try doing something similar in our html and css. We have here on the page on line 14, we have div class of background image, and the in our css, actually we don't have any css, we'll make some css. I'm gonna make a new file [COUGH] I'm gonna call it style.css, cuz I'm super original that way.
[00:00:31] I'm gonna link that style.css file up to my HTML.
>> Jen: Sorry, link.
>> Jen: href="style.css rel="stylesheet"
>> Jen: Okay, and then in the stylesheet what I'm gonna do is, I'll go ahead and write a series of media queries for this is what I can do. So I can say, for example, @media,
[00:01:16]
>> Jen: (min-width: 1px)
>> Jen: It's at least one pixel wide. You can stir this, so my class of background image.
>> Jen: Background url and I have here in my image folder, I have three different versions of a mom pie. Okay, so small, medium, and large. So I can display that image.
[00:01:52]
>> Jen: Oops, JPEG. No repeat and you probably want to set a height.
>> Jen: Why do we set a height?
>> Jen: Normally, we never set a height. Why would we set a height here?
>> Jen: That's our HTML. That one line, there on line 15. Here in our style, we're gonna set a height.
[00:02:22] Why would I set a height here?
>> Speaker 2: So it shows up
>> Jen: So it actually shows up.
>> Jen: How is height normally determined in a box?
>> Speaker 3: By what fills it.
>> Jen: Yeah, by what fills it, its content, content determines the height. If you have no content on a div, you have nothing to fill it, so you gotta have a height.
[00:02:44] Where do I get the height from?
>> Jen: I can probably just look at the image, right? Just look at the image and figure out what its height is, okay?
>> Jen: Y'all going to sleep already?
>> Jen: Okay, so now, if I have a minimum width of, let's say, 500 pixels, then we'll go ahead and load the different image.
[00:03:13] The one that's 767 pixels in size, and its height is 128 pixels.
>> Jen: And then, finally, I can have a third media query for the big screen.
>> Jen: Okay, so there we go, three little mini queries and when I refresh my webpage, we should see only one image.
[00:03:49]
>> Jen: I need to re-display my image, okay.
>> Jen: There we go. All right, so there's my background image up here on the top, and there's my peace pie.
>> Jen: Okay, so there's my one image.
>> Jen: There it is. Scootching to the smaller size and I must have a stray tag somewhere.
[00:04:19] Something's not behaving but hopefully it worked for you.
>> Jen: How are you doing? Besides exhaustion. [INAUDIBLE] Good, all right. Do we have any questions from the internet?
>> Speaker 2: IE support. I don't know.
>> Jen: IE support for picture fill, or?
>> Speaker 2: Yeah I'm assuming it works.
>> Jen: Yeah. So, the picture tag doesn't work in IE.
[00:04:51] Big surprise, it's HTML 5.1. It maybe spotty support for older browsers but that's what the picture fill, polyfill is all about. So if you include the picture fill polyfill with it then you are making things forward to compatible. I know a lot of you are writing code bases that are around for a really long time.
[00:05:11] It's probably worth using this particular polyfill, because then you can use the actual picture tag in your code. And then at some point in time in the future you can just drop the polyfill, right? You still have standards compliant HTML. Which eventually someday will be rid of Internet Explorer or I've heard of all rainbows and unicorns and ponies.
[00:05:31] It's gonna be a great world to live in, but until then the polyphill is maybe useful, again depending on what kind of browsers you got to support