Using CSS to work with an HTML page background can offer some very creative avenues for design. You can determine where or when you want an image to be displayed for the end-user, as well as why.
This ensures the direction and purpose of your design stays intact as the user moves through the page. In this brief tutorial, you will cover the basic use of the CSS background-attachment option to help your own design ideas.
Concept to Consider When Setting A Background
Something you should consider when changing the background image position is what viewport it is located within. Consider the viewport as the current place where the user’s eyes are covering. If they scroll up and down on your page, does the image move in the same manner or remain fixed in a static position separate from the foreground content? These are questions you should consider before setting the image.
Take into account how it may impact the content in positive and negative values. Does it detract from the content or impair the general navigation of your page? Does it add value or direction to the use of the website? It may even be worthwhile to make an analog mockup of your page prior to committing to any one image to provide a visual concept of how these questions might be answered.
Setting the Background
Before we begin working with the background-attachment settings, we need to apply a background to our webpage. You can load a background image from a web or local URL.
For this example, we will load from local storage. In our CSS file, we can use the following code.
body {
background-image: url("Dreamer.JPG");
}
Replace the content with your own information, if you want to follow along.
body {
background-image: url("NameOfYourImageHere.FileFormat");
}
For this example page, this loaded the background image as shown below. A white background was also added to the single paragraph tag so it could be easier to see for this example.
Setting the Background Attachment
As you can see with the image above, we have the image of a little dreamer sitting atop a desktop now positioned as the background of our test HTML page.
For the next steps, you will add a few more items to the page so it will have a need to scroll down to view the entire content. See the short GIF below.
You can see the image is replicated in the background since you have no other demands on how it is applied. The content scrolls down and the image repeats to fill the space on the page as it does.
From this point, you can go ahead and try out some of the options for using CSS background-attachment.
Background-Attachment: Scroll
Setting the background-attachment to scroll is accomplished by adding the appropriately named “background-attachment” property to your CSS. See the example below as it appears in the body.
body {
background-image: url("Dreamer.JPG");
background-attachment: scroll;
}This will tell the browser, through our CSS, that you want the background image to scroll along with the page as the user navigates up or down. This of course will have the image move out of view as they do so. To show this, additional properties have been added to the body selector.
In the example below, the background image is told to not repeat itself which stops it from appearing over and over as the user scrolls. You can also make the image take a position at the top of the page to better demonstrate the effect.
body {
background-image: url("Dreamer.JPG");
background-attachment: scroll;
background-repeat: no-repeat;
background-position: top;
}
As you can see in the animation below, the image moves out of view when the page scrolls down.
Background-Attachment: Fixed
On the other side of options, you can also inform the browser to keep the image in a fixed position. As you may have deduced, this option retains the background-attachment image in place.
If the user were to scroll, they would always have the image in the position you placed it in. See the code change below. Here, simply replace the word “scroll” with “fixed”.
body {
background-image: url("Dreamer.JPG");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
}
Now, after saving and refreshing the HTML page, you can see the image remains stationary during the content scroll.
A Failover Option
From experience, It has been known that you cannot rely on your work to always give you a perfect 100 percent smooth run. Even if you feel that everything is working great, it never hurts to prepare for a bit of failure.
Much like you would add alt tags for images in the case that they may not load for a user, you can also add a background color for your image. You, of course, should select a color that would not impair the use of the page.
In the code below, you can see it is as simple as adding a “background-color:” property and value to the CSS.
body {
background-image: url("Dreamer.JPG");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
background-color: gray;
}
With the above in place, even if your background-attachment image does not properly link or load for whatever reason, the background color can still come through to provide some style options for the end-user.
Is There More?
This brief run through CSS background-attachment covered the basics of concept and usage. However, as with many aspects of web design, that is only the tip of the spear. With more advanced UI designs comes independent viewport options and even animations that can be tied to scrolling actions.
It’s worthy to note that knowing how to apply CSS to your HTML is only a part of this learning process. Knowing why and when to use that in your design can be just as, if not more, critical to its success. Exploration and experimentation on this front can be a lot of fun as well. Just remember not to stress and have a good time with your creative options.
__________________________________________________________
The modern world runs on code and that code comes from people like you. If you are looking to fly farther and stronger than ever before, take the first steps with code. Learning to code can help you open doors to those new possibilities of a better you. Embrace Udacity’s Intro to Programming Nanodegree today to start the journey.
