Okay, so the point is it's going to be a background image and
I'm already sizing it exactly to be 250 pixels tall.
And also notice that I'm positioning it in the center of my container element.
What that's going to give us is that as the container element, that tile,
shrinks a little bit, since the main dish is still sitting in the center,
we're still going to see quite a bit of it and eliminates the need for
us to provide different sized images for different screen sizes.
And the truth of matter is, if this is a huge image,
I will probably have to do this because I wouldn't want to waste so much bandwidth.
But it's a fairly small image and it's just not worth it for
me to keep switching the images at this point.
Plus, it's a good opportunity for me to show you this technique
of being able to position an image as a background image and
still not have problems when the container element starts shrinking around it.
And you just position it in the center and you should be good to go.
So let's save that and go ahead and take a look as to what this looks like in
the browser, and it's certainly starting to look pretty nice.
So here's our dishes, our menu, and our specials.
We still haven't done anything with the map.
Well, let's go back to the code editor and
in the styles.css, let's go ahead and position our tags.
So these tags right here are the labels.
We really need to be right here at the bottom.
Let's go ahead and do that.
Again, I have some code that I prepared before the lecture.
And let me cut and paste it right here and let's go over it right now.
So first of all, we are targeting menu-tile span,
which means it's the span inside the element that is IDed with menu-tile.
And the same thing with specials-tile and map-tile.
So the first thing you see here is position: absolute.
And that means we're going to be positioning these spans absolutely within
the containing element, which is the menu-tile.
Okay, so positioning absolutely,
we need to bring them all the way to the bottom, let's go take a look.
We need them all the way at the bottom right here.
Well, that's very easy to accomplish.
It's bottom 0, right 0.
Well, that's easy.
And we want the width to be 100, which means 100% of the containing
element again, I want it to stretch all the way across the tile.
Okay, text align: center, that's pretty simple.
And we want to bump up the font size to be about 1.6 ems,
which is 60% above the whatever it is that it's going to land on,
meaning whatever it's inheriting at this point.
And text transform is uppercase, I want all of them uppercase no matter
what it is that we type inside of our HTML.
Background color is going to be black and the foreground color, the text color,
is going to be white.
And also I'm going to bump the opacity down a little bit.
So if I put 1 here, that will be 100% opacity,
meaning it won't be see-through at all.
But if I do 0.8, it'll be just a tad see-through so we will be able to see
our nice picture of some dish that's in the background of our tile.
So let's go ahead and save that, and take a look in the browser.
And here we go, so here's our tiles, and you can see the menu and
the specials and the map, nicely done, right at the bottom here, the specials and
the text is very nicely visible.
And you can see that there's opacity a little bit tuned down so you could
actually see this dish in the background which gives it a really nice touch.
Okay, next let's go ahead and embed the map right here into this map tile.
The first thing we want to do is we want to go to maps.google.com and
you want to search for the location that we need to map into that tile.
And I already did this, here we go, it came up right here.
And so, in order to get the embedded map, so what you have to do is you have to go
to this menu right here and go to share or embed map.
And it's going to come with either a link or embedded map.
So the first thing we're going to do, we're going to go ahead and
copy the link that we have here and go back to the code editor.
And we'll go to index.html and we'll paste the link right here inside the href.
And it's kind of a crazy-looking link, but that's all right.
Okay, let's go back to the browser and this time we'll click on embed map.
And then it's going to give us an iFrame with basically all the code that we need.
We'll again go ahead and copy that.
We'll go back to the code editor and
we need to past this iFrame right here in the middle of this div.
So we'll go ahead and do that right now, we'll paste that right here.
And we're almost done, except we need to adjust the width and
the height of this iFrame.
If you look at our styles.css,
you'll see that we're styling all the tiles to be height 250 pixels.
So let's go ahead and do the same thing here.
Right now our height is 300, so let's turn it down to 250.
And the width, we actually need to be 100%.
Because once again, the width is going to be defined by the grid,
by the bootstrap grid, and we want the style to stretch as much as
possible to the edges of that cell inside that grid.
So let's go ahead and save that and go take a look in the browser.
Let's switch to our site and look at that,
we have a very nicely done map tile here next to the specials and the menu.
