Wednesday - Sticky Backgrounds

For the most part, when we use background images we'll want them to fill the entire display window. But sometimes you'll want a background image just over a part (maybe the bottom of the screen, maybe the left margin, etc.) and you might want that image to be visible on the screen at all times, even if you have so much content that the text has to be scrolled to get to the end of the page.

We can achieve this sticky background effect by using a property called background-attachment, which you can then set in CSS to fixed, which will stick the background wherever you put it. Most of you are not going to use this feature so I will not make you include it in your code, nor will we spend class time today working over how to position that background image somewhere other than the upper-left corner of the display window. We're covering it so that you know it is an option. Some of you will want to spend time exploring this property to get this effect on their end-of-semester project.

For additional support with sticky background images, check out W3School's tutorial on background-attachment.