CSS Background Attachment

CSS Background Attachment यह decide करता है कि background image scroll करते समय move करेगी या fixed रहेगी। इस property का use mostly parallax effect और fixed background design के लिए किया जाता है।

background-attachment Property

background-attachment: value;

background-attachment Values

1. scroll (Default)

Background image page के साथ scroll करती है।

body {
  background-image: url("bg.jpg");
  background-attachment: scroll;
}

2. fixed

Background image fixed रहती है, content scroll होता है।

body {
  background-image: url("bg.jpg");
  background-attachment: fixed;
}

यह parallax-like effect देता है।

3. local

Background image element के content के साथ scroll करती है।

div {
  background-image: url("bg.jpg");
  background-attachment: local;
  overflow: auto;
}

यह value scrollable elements के लिए useful है।

background-attachment के साथ Common Properties

Example

body {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

background-attachment on Specific Element

.section {
  height: 500px;
  background-image: url("section-bg.jpg");
  background-attachment: fixed;
}

Mobile Devices Issue

Mobile browsers में background-attachment: fixed अक्सर सही से काम नहीं करता।

Reason:

• Performance optimization
• Browser limitations

Alternative for Mobile

Mobile-friendly parallax effect के लिए:

.section {
  background-position: center;
  background-size: cover;
}

background Shorthand with Attachment

body {
  background: url("bg.jpg") no-repeat center fixed;
}

Common Mistakes

background-size miss करना

Fixed background बिना proper size के stretch या cut हो सकता है।

Mobile compatibility ignore करना

Fixed background हर device पर same behave नहीं करता।

Best Practices

• Large hero sections में fixed use करें
• Performance ध्यान में रखें
• Mobile users के लिए fallback design रखें

Summary

• background-attachment scroll behavior control करता है
• scroll default value है
• fixed background को static बनाता है
• local scrollable element के लिए useful है
• Mobile devices में support limited हो सकता है