How to specify a fixed background-image in CSS ?
In this article, we are going to see how to specify a fixed background image in CSS. To keep your background fixed, scroll, or local in CSS, we have to use the background-attachment property.
Background-attachment: This property is used in CSS to set a background image as fixed or scroll. The default value of this property is scroll.
Values of background-attachment property:
- Scroll: It is the default value for the background-attachment property. It is used to scroll the image with the background page.
- Fixed: The background image will not scroll. It is fixed with the page.
- Local: The background image will scroll with the content.
To keep your background image fixed, you have to use background-attachment property with the value Fixed.
Syntax:
background-attachment: fixed;
Example:
HTML
<!DOCTYPE html> < html > < head > < style type = "text/css" > h1 { text-align: center; } #ex { text-align: center; background-image: background-position: center; background-repeat: no-repeat; background-attachment: fixed; } </ style > </ head > < body > < h1 >Example for fixed Background Image</ h1 > < div id = "ex" > < p > Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, </ p > < br >< br > < p > a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph. </ p > < br >< br > < p > A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). </ p > < br >< br > < p > Length and appearance do not determine whether a section in a paper is a paragraph. </ p > < br >< br > < p > For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support one main idea. </ p > < br >< br > < p > In this handout, we will refer to this as the “controlling idea,” because it controls what happens in the rest of the paragraph. </ p > </ div > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome 1.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 3.5
- Safari 1.0