We’ll add a poster image to page header and position it with named lines. Then, we’ll do some CSS styling to make the page more attractive. Make sure to watch the video update as well.
Update
Since this lesson was recorded, browsers changed the way how the auto sized rows are calculated. As a result, the poster image in our project causes the header to stretch the header section. Watch this video update to learn more and see how to solve the issue.
Transcript
Let’s make our page a bit more attractive.
First, we can add a beautiful image to the top part of the page.
Let’s find something on Unsplash. We can set a custom size for the image.
Then we drag it to the Body element.
We have to size the image to fit into available space, like we did for Gallery images.
Again we’ll use the Object Fit property to ensure that the image keeps correct proportions even if it is resized.
We’ll create a .poster class and CSS rule for the image.
We place the image so that it covers the top part of the page.
Ups… now it covers the page content.
We could just move the image element to the beginning of the Body…
But perhaps we don’t want that because the image is not the most important element of the page.
Instead we can use the CSS z-index property to push the image down to the background.
We also need to change the color of the Heading. And make it bigger. We’ll create a CSS rule for the H1 element.
The image is placed with numbered column and row lines. As we learned before, that’s not the best way to place elements because whenever the grid changes we have to manually update these coordinates.
Can we use named areas?
Unfortunately not, because named areas can’t overlap. And the image intersects with the Header.
Well, CSS Grid has more tricks up its sleeve.
Instead of naming the area, we can name the lines.
In the Grid Editor we click on a line to edit its name.
We’ll call them Poster lines. The first one will be poster-start.
The ending line will be poster-end.
Note that the -start and -end have special meaning in CSS Grid.
We do the same for row lines. Poster-start… Poster-end…
Now we just nudge the Image to fall on these lines. And… it is no longer placed by numbered lines. Instead it is set with the grid area Poster.
So, in a way, Grid named areas can overlap if they are defined by named lines. Not having them overlap is just the limitation of the grid-template-areas property.
Now we have a lot of flexibility when it comes to changing the grid.
Let’s add more rows to have more space for creativity.
It’s best to make them fixed size when we’re experimenting with the layout.
We can move things around by editing the named areas and named lines.
Let’s push the content over the Poster image.
It needs a white background and some padding. We’ll save all its declaration into a CSS rule as well.
The edge of the content text is now not aligned with the footer.
A left border on the content will provide the visual connection. We’ll pick a border color from the image.
Now we can just play with row and column sizes to fine-tune the layout.
Let’s also tweak text styling a bit. We do that on the Body element.
We change the font using the Google Fonts Selector. Late is a nice font. A bit more line height… and.
There it is.
Still to come – making the layout responsive and making sure the page can be used in browsers that don’t support CSS Grid.