CSS Background Attachment

background-attachment तय करता है कि कोई background image page content के साथ scroll करे या user के scroll करते समय अपनी जगह पर pinned रहे।

In this page:

Default: scroll
fixed से Background Pin करना
local Value
Performance Considerations
Attachment को Size और Position के साथ Combine करना

Syntax

css

selector {
  background-attachment: scroll | fixed | local;
}

Default: scroll

background-attachment: scroll default है और इसका मतलब है कि background image page scroll होने पर element के content के साथ-साथ move करती है -- image असल में element के relative fixed है, viewport के relative नहीं।

Note:

Accepted values:
scroll — element के साथ move करता है, page scroll के साथ नहीं (default)
fixed — viewport पर pinned रहता है, page scroll होने पर भी अपनी जगह बना रहता है
local — element के अपने content के साथ scroll करता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: The Default: scroll

css

<style>
.box {
  background-image: url('https://placehold.co/300x600');
  background-attachment: scroll;
  height: 150px;
  overflow: auto;
  color: white;
}
</style>
<div class="box">
  <p>Background moves together with the page</p>
  <p>Line 1 of filler content.</p>
  <p>Line 2 of filler content.</p>
  <p>Line 3 of filler content.</p>
  <p>Line 4 of filler content.</p>
  <p>Line 5 of filler content.</p>
  <p>Line 6 of filler content.</p>
  <p>Line 7 of filler content.</p>
</div>

fixed से Background Pin करना

background-attachment: fixed image को browser viewport से ही anchor कर देता है, इसलिए जब पूरा page content उसके ऊपर scroll होता है तब भी image visually स्थिर रहती है -- यही classic parallax effect है जो full-width hero sections के लिए इस्तेमाल होता है।

Note:

Accepted values:
fixed — viewport पर pinned
scroll — खुद element से attached (initial value)
local — element के scrolling content के साथ move करता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Pinning a Background with fixed

css

<style>
.hero {
  background-image: url('https://placehold.co/1200x800');
  background-attachment: fixed;
  height: 300px;
}
</style>
<div class="hero">Stays still while the page scrolls over it</div>

local Value

background-attachment: local background को element के अपने content के साथ scroll करता है अगर वह element independently scrollable है (overflow: auto/scroll के साथ उससे लंबा content है), जो scroll नहीं करता -- scroll background को element के relative fixed रखता है भले ही उसका अंदर का content scroll हो।

Note:

Accepted values:
scroll — element से fixed, page के साथ move करता है (initial value)
fixed — viewport से fixed, scroll होने पर भी अपनी जगह बना रहता है
local — element के अपने content के साथ scroll करता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: The local Value

css

<style>
.box {
  background-image: url('https://placehold.co/300x600');
  background-attachment: local;
  height: 150px;
  overflow: auto;
  color: white;
}
</style>
<div class="box">
  <p>Background scrolls together with this element's own inner content</p>
  <p>Line 1 of filler content.</p>
  <p>Line 2 of filler content.</p>
  <p>Line 3 of filler content.</p>
  <p>Line 4 of filler content.</p>
  <p>Line 5 of filler content.</p>
  <p>Line 6 of filler content.</p>
  <p>Line 7 of filler content.</p>
</div>

Performance Considerations

background-attachment: fixed कुछ mobile browsers पर scrolling को janky बना सकता है क्योंकि browser को हर scroll frame पर fixed background को दोबारा paint करना पड़ता है; इस property के लिए असली devices पर test करना बाकी ज़्यादातर से कहीं ज़्यादा मायने रखता है।

उदाहरण: Performance Considerations

css

<style>
.hero {
  background-image: url('https://placehold.co/1200x800');
  background-attachment: fixed;
  height: 200px;
}
</style>
<div class="hero">Test fixed backgrounds on real mobile devices</div>

Attachment को Size और Position के साथ Combine करना

एक fixed background लगभग हमेशा background-size: cover के साथ जोड़ा जाता है ताकि screen size चाहे जो भी हो pinned image viewport की पूरी width भर दे, और अक्सर background-position: center के साथ भी ताकि image का सबसे ज़रूरी हिस्सा दिखता रहे।

Note:

Accepted values:
background-attachment: fixed — image को viewport पर pin करें
background-size: cover — box भरने के लिए scale करें, crop हो सकता है
background-position: center — focal point को centered रखें
background-attachment: scroll | local — दूसरे attachment modes
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Combining Attachment with Size and Position

css

<style>
.hero {
  background-image: url('https://placehold.co/1200x800');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  height: 300px;
}
</style>
<div class="hero">Fixed background, scaled to cover, centered</div>

Live Example

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Background Repeat Next Lesson → CSS Background Shorthand

CSS Background Attachment

Default: scroll

fixed से Background Pin करना

local Value

Performance Considerations

Attachment को Size और Position के साथ Combine करना

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code