body {

height: 2000px;

background: url(‘exampleicon.png’) no-repeat;

background-attachment: fixed;

border: 1px solid black;

}

Save the file and open up your index.html page in Google Chrome. Scroll the page down and look at what happens to the icons you added to the body. Notice how they remained in the same place while the rest of the page scrolled down? This is how fixed positioning works in web design.

This example highlights the power and flexibility that this property allows developers. The ability to separate out fixed elements from the rest of the page like this allows a developer opportunities that are simply not possible if every element is bound to the scroll of a webpage.

Background image

That about draws a close to the background image related properties, but before we move on, you need to be aware of a method used to speed up setting these various properties and values – ready for when you’re more familiar with how each of them works and will be using them in a real-world environment.

This is the ‘background’ property. Imagine if we rolled up all of the ‘background’ related properties into one ‘super’ property which allowed you to easily choose which values to set and in any order you liked? Well, that is exactly what the background property does. Let’s see its simplistic beauty in action.

Thanks to the wonderful background property, this hefty chunk of code: