If we look at the screenshots, we see that we’ve got a few more things we need to do with the header and the footer of the site.
First of all, each has a background image, or two.
Hopefully, at the start of this exercise, you downloaded the background images and put them the theme folder.
Now open up the file _header-footer.scss
First of all, we want the two lines in the footer to appear on their own. Right now, all the site-info content is in a single line in the footer.
We could edit footer.php and put more spans or divs in, but we could also get the two sentences on their own lines via CSS methods. If you inspect the footer that gets output, you will see that the PROUDLY POWERED BY WORDPRESS line is wrapped in an A tag.
So if we did CSS like this, we could split the lines visually without editing any PHP:
.site-info a:nth-of-type(1) {
display: block;
}
However, we’d still be left with the “|” character that is being used as a separator. Looks like we’ll have to open up footer.php after all.
But all we’ll need to do is delete the following line:
<span class="sep"> | </span>
Back to our background image styling.
The header will be easy. Just remember that the CSS path will be relative to the compiled CSS file, not the SASS file you are editing:
.site-header {
background-image: url('images/bird-200x158.gif');
background-position: top right;
background-repeat: no-repeat;
background-size: 100px;
}
There are two background images in the footer. If we look at the images, we realize that they’re much too big to be used as small decorative background images in a production site, but for design purposes we’ll use background size properties anyway for now. Before the site went live, we would definitely want to size the images down with a graphics editor like Photoshop or XnConvert.
To use multiple background properties on an element (up to four are allowed), just separate their properties with commas. This would do the trick:
.site-footer{
min-height: 120px;
background-image:
url('images/giraffe-left.jpg'),
url('images/giraffe-right.jpg');
background-position:
bottom left,
bottom right;
background-repeat: no-repeat;
background-size: 140px 140px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
And now, we should be ready to start work on styling the front page layout.