- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS - background-attachment
Description
background-attachment determines the tiling context and scroll state of a background image.
Possible Values
scroll − A background image set to scroll will scroll along with the rest of the document.
fixed − A background image set to fixed will remain locked in place while the rest of the document scrolls.
Applies to
All the HTML elements.
DOM Syntax
object.style.backgroundAttachment = scroll | fixed;
Example
<html>
<head>
</head>
<body>
<p style = "background-image:url(/images/logo.png);
background-attachment:scroll;
background-attachment:scroll;
background-repeat: no-repeat;
background-attachment: fixed;">
This parapgraph has scrolling background image.
This parapgraph has fixed repeated background image.
This parapgraph has fixed repeated background image.
This parapgraph has fixed repeated background image.
This parapgraph has fixed repeated background image.
This parapgraph has fixed repeated background image.
</p>
</body>
</html>
It will produce the following result −
Advertisements