Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We have the image we'd like to use for our modernist bibliography. Now we need to add the image to our page. You need the files, biblio_sans_bgimage. html, and biblio_sans_bgimage.css from the Exercise folder. I have also provided an images folder with the image file in it. Open up the HTML file in the browser to see what we're working with. Everything is in place except for our image and based on our image we also need to make a couple of changes to our colors.
Let's put the image on our page. In the CSS, we're going to add the image to the background of the page, so we'll add it in the body tag. Let's type in background-image: url (images/books_bg.gif) and background-repeat: no-repeat, and background-position: 0em 10em, and background-attachment: fixed.
For right now we're going to leave our background-color. This tells the browser you want to use a background image and the URL says follow this path into the folder called images to find the image. Background-repeat: no-repeat means only use the image once. Don't repeat it. Background-position means position the image 10 ems over on the X axis and 10 ems down on the Y axis. Background-attachment when it's fixed it means keep the image in the same place in the browser, even when we scroll up and down.
So that means the image will always be visible. Let's save this and take a look at it in our browser. Great! The image came in. It's where we want it to be. And if we scroll down and back up, the image stays there. Of course, now we need to add some white into the background here so that we can actually read our text. Find the ID for your main_container, and add background-color: #ffffff for white.
Again, I am avoiding shorthand. And while we're here, we also know we want to make the rule line the yellow. Let's see. I want to bring the yellow in again. So let's see. Here's our section_ container, and our rule line right is a border-top in the section_container, and it's currently blue, and we're going to make it yellow, which is #cc9e33. Let's save that and we can review it in our browser. We can read our text now and we've brought that yellow in.
One of the problems we're still having though is that the text in the navigation links is still using the light yellow that was in this part of the page. And now that this part of the page is white, I think that the text for those links should be white. Let's go in and change that. Again, scroll down to the links and there's our navigation links and the color, we'll change that to white, and then we can copy and paste into visited, and also into hover.
We are not going to change it in active, because in active it's turning that sort of dark yellow and I want to keep that. We can save and review this in our browser. Great! Now the links have a white text. I think that's going to work better with the white background here. We do still have one last problem. The text is too close to the edge of the page here and you can really see it's not the same size as our navigation either. So we are going to have to fix that. We need to add some space in there between the content and the edge of the page.
And we'll take care of that in the next lesson.
Get unlimited access to all courses for just $25/month.Become a member