Fixing the Background Image in CSS3
Mastering CSS3 – Part 12
Forward: In this part of the series, we look at the three ways in which the background image can be kept fixed.
By: Chrysanthus Date Published: 25 Jul 2012
Introduction
Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.
The background-attachment Property
To keep a background image fixed with respect to scrolling, you need the background-attachment property. The value to this property can be “scroll” or “fixed” or “local”. Remember, it is not only the body element that can have a background image. Other elements such as the paragraph element and the div element can also have the background image. That is why you have the three possible values. We see the differences in the use of the three values below.
In this tutorial, consider the client area or viewport as the body element.
The local Value
Consider a div element normally on the body element. Assume that this div element has a background image and scrollbars. When you use the scrollbar of the div element (by dragging the scroll box) and you want the background image of the div element to move along with the div’s contents, you use the value “local” as value for the background-attachment property. This is the default situation; the effect is the same as not using the background-attachment property and the value, “local”. Read and try the following code with an image of your choice:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<div style="background-image:url(pic.png); background-repeat:no-repeat; background-attachment:local; width:300px; height:300px;overflow:scroll">
<br><br><br>seen<br><br><br><br><br><br>seen<br><br><br><br><br><br>seen<br><br><br>
</div>
<br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br>
</body>
<html>
With the value, “local” the image is fixed with respect to the element’s contents. In other words, as you move the scroll box of the scroll bar of the element, the image moves along with the element’s contents (fixed with respect to the content and so move along with it). As you move the scroll box of the client area (viewport) of the web page, the image still moves.
In the above code, do not confuse between the value of the overflow property and the value of the background-attachment property.
The code samples in this tutorial may not work with your browser if your browser is old.
With the value of “scroll” the background image is fixed with respect to the element itself. So, as you move the scroll box of the scroll bar of the element, the image stays in one position and does not move with the element’s content. However, if you move the scroll box of the scroll bar of the client area (viewport) of the web page, the image would move. Read and try the following code with an image of your choice:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<div style="background-image:url(pic.png); background-repeat:no-repeat; background-attachment:scroll; width:300px; height:300px;overflow:scroll">
<br><br><br>seen<br><br><br><br><br><br>seen<br><br><br><br><br><br>seen<br><br><br>
</div>
<br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br>
</body>
<html>
The fixed Value
With the value of “fixed”, the background image is fixed with respect to the viewport (client area), irrespective of whether you move the scroll box of the element or of the viewport. Note: as you move the scroll box of the viewport continuously, the image will ultimately be covered by other scrolling elements on the body. Read and try the following code with an image of your choice:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<div style="background-image:url(pic.png); background-repeat:no-repeat; background-attachment:fixed; width:300px; height:300px;overflow:scroll">
<br><br><br>seen<br><br><br><br><br><br>seen<br><br><br><br><br><br>seen<br><br><br>
</div>
<br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br>
</body>
<html>
So far as fixing the background image is concerned, consider the body element as the client area (viewport) and consider the scroll bar of the client area as that of the body element. At the limit, they are not the same thing though. All the above principles apply to the body element. Read and try the following code and note that the background image is fixed with respect to the viewport.
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body style="background-image:url(pic.png); background-repeat:no-repeat; background-attachment:fixed">
<br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br><br><br><br>the body<br><br><br>
</body>
<html>
Advantage of the fixed Value for the Body Element
You may have a long web page and you would think you need a long background image for the long page. You can go ahead and do the design. The problem is that the bigger (longer) the image the longer the download time for the image. To solve this problem, you can have a smaller image that will just fill the viewport and keep it fixed for the body element. In this case, do not use the “background-repeat:no-repeat;” so that the image will either expand a bit or contract a bit to fill the viewport; you can use the background-clip property if necessary.
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT