EMBED VS BACKGROUND IMAGES

"This is an embedded image and as we've learned from earlier episodes, the embed image always shows the image to this size. What do I mean by that? If I change this image to a different size, let's say we've got this one here, which is a square, 1440 by 1440, well that's higher, so that when you have an embed image, it shows it to that particular size. Well, as we know, we want to make all of our columns the same height. In this case, what I'm going to do is delete the embed image. I'm going to delete that. Okay, great. And now, I'm going to add in a background image. Active frame red dot over here, background image, and now I can hit browse and put in our background image.

Well, here is the next lesson. Now, the background here that we've got this particular image in, the frame that we've got this particular image in needs a height. So, I'm going to go back over to frame. We've had a look at width before. We've had a look at max width. We've also had a look at the percentage width to a degree and even the alignment of that percentage width. Lots more on that. This is a really nice feature, but right now we're focused on heights. Here, we've got a minimum height. We could set this to, let's say, 300 and that's the minimum height. If I add content in here, this is a background image, I can now embed content text on top of that. And as people write more text, the content users add more text in the future, but if it sets to minimum, the frame will grow as they add text.

But in this case, I want to fix it to a height always, so I'm going to select my fixed height at 400 pixels. I could make it full screen, but in this case I'm going to make it 400 pixels. I think you get that. And then, there's other things. We're not going to cover in this now, but if the people do put text in here, and I could choose the behavior of how I want that to grow, so I can basically use the overflow here and say if people add more text, make it hidden, keep it there. Or if people add more text, put a scroll in so they can scroll the text and the height will stay the same. More on that in the advanced classes.

Right now, we've got a background imaging, but what is going on with this background image? All I can see is this part of the image here. You see this chair? I'm looking at this portion of the image. Let's go and investigate as to why. Okay, so I'm going to put the active state on the red dot. I'm going to go back to background image, and you can see here that our background image position is set to top left. Well, if I choose this and put it center center, that's center horizontal, center vertical, you can see I'm looking at this portion. Now, this is showing me the image. It's a 1440 pixel image, so we've not done anything to change the size of the image. That image is just its actual size, its default size, and we're looking at that in the center. Okay, so it's 1440 pixels wide. This is 400 pixels high. We want to see all of the image. So, this is where we use the background image fit.

The first thing you'll learn here, background image fit. If I click cover, it covers the full frame, so we lose a bit maybe of the left or right in this case, because it's covering the full frame. Well, if I wanted to see all of that image in a frame, I could use contain. Now, you can see the image here that's contained. It always shows the full image, and it'll stretch to either. If it's a landscape, it'll stretch to the full width. And if it's a portrait, it'll stretch to the full height. So, you always see the full image when it's contained. But look at this, this has got a background image repeat, it's repeating it, but the default is to repeat it around. But if I click no repeat, you can see my contained image.

Now, background image repeat, often it's used for... Maybe you've got a tiled pattern or a tiled texture that you would like in the background, so I could have a small maybe wood grain that just repeats in the back or something like that. That was an old technique in the days of MySpace, in the days of skeuomorphism, but those techniques have long since passed, but it is there if you need to use a repeat for any reason. That's where we'll use repeat. My general setup, ever-in-doubt setup, is background position center center. I use cover, no repeat, and then I could choose to use a background image fixed.

Well, background image fixed is used a lot on banners. So, you have a four width banner, and it fixes in the background. And as you scroll, the text will scroll on top of it. Okay, but in this case, I've got a background image fixed, and it's just showing almost a window looking through that. Because the image is fixed in the background, it's showing the image in its full size, and it's fixed in the background, so cool techniques that you could do here.

What I'll do is just delete this image here, and I will make this one also fixed height, 400 pixels, and let's put in that same image again and show you this cool technique. I will put this center center, cover, no repeat. And in this case, I'm going to turn background image on as well. And you can see, because that image is fixed in the background and it's covering the whole width, it's fixed the background, I can now see that image looking through that into the background. So, that's a cool little technique."