Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We have picked an image we would like to use for our traditional bibliography. Now we need to add it to our page. You need the files biblio_serif_bgimage.html and biblio_serif_bgimage.css from the Exercise folder. You also need the font's folder with the web font files for Chopin Script. So put a copy of your font's folder into your Exercise folder. That way Chopin Script will continue to load properly. You can see I have provided a folder called Images.
It has our image in it. Open up the Images folder and you can see the image inside is called traditional_bg.jpg. You can name the image anything you want to. I tend to use a bg in my background images' names, because it helps me to know immediately what the image is for. It also helps me to search for images in my files. I also like to include a simple description in the title so my bg images don't overwrite each other. If you choose to download an image, you'll find most sites offering background images use their own naming conventions.
The names can get pretty abstract and it makes it hard to keep images organized. I recommend renaming images so they make sense with your project. Let's open the HTML file in the browser and see what we are working with. The page is set up and we are just missing the background image. So let's put it in our page. And we will do that in the CSS. We are going to add the image to the entire background of the page, so we are going to put it in the body tag. Here we are going to replace the background-color with background-image and we are going to tell the browser where to find that image.
I am typing in here the name. Let's see. So this line, background-image, tells the browser I am putting an image in the background of this site or of this page. The URL says follow this path to find the image I want you to use. Here images/ means it's in my images folder, and then traditional_bg.jpg is the name of the image I want the browser to use.
And then I can close the parenthesis and close the semicolon there and we're set. Now by default this image is going to tile across and down the whole background of the web page and that's exactly what we want. Let's save this and view it in our browser, hit Refresh, and excellent, there is our background image. The only problem is there isn't much space here between the type and the background image, and we are going to have to fix that. We need to get some breathing room into this layout.
Get unlimited access to all courses for just $25/month.Become a member