Exercise
We are going to be creating an ‘icon’ type div that could be used on our homepage as a quick link to another page on our website. Using the background-image manipulation techniques we have learned above:
- Create a new div on your index.html file and give them each a class of ‘navigation-card’.
- Inside our CSS file add the appropriate rules for the class to add the ‘exampleicon.png’ file from the images folder on to the divs.
- Make sure that the image doesn’t repeat.
- Place the image in the centre of the div.
- Give the class a height of 150px and a width of 150px.
The final output should look something like Figure 5.10.
5.10 
Background attachment
Background attachment introduces a new concept that we haven’t seen before. This concept is fixed positioning. Fixed positioning is where an element on a webpage remains where it is regardless of where the user has scrolled. The best way to understand this is to see it in action. Let’s run through a quick exercise to highlight exactly what we mean when we say fixed positioning. First, open up your CSS file in your text editor of choice, then add the following snippet to the end of your code: