Background Attachment

Background Attachment అంటే ఏమిటి?

background-attachment property background image page scroll అయినప్పుడు ఎలా ప్రవర్తించాలో నిర్ణయిస్తుంది.

సాధారణంగా background image content తో కలిసి scroll అవుతుంది. కానీ fixed value ఉపయోగిస్తే background image viewport కు స్థిరంగా ఉండి, ముందున్న content మాత్రమే scroll అవుతుంది.

ప్రధాన values

scroll: ఇది default value. Element content scroll అయినప్పుడు background కూడా content తో కలిసి scroll అవుతుంది.
fixed: Background image browser viewport కు fixed గా ఉంటుంది. Page scroll చేసినా అది అదే స్థలంలో కనిపిస్తుంది.
local: Element లోపల scroll చేసే content ఉంటే background ఆ content తో కలిసి scroll అవుతుంది.

ఎప్పుడు ఉపయోగించాలి?

Long landing pages, hero sections, reading pages మరియు decorative backgrounds కోసం background-attachment: fixed; ఉపయోగించవచ్చు. Text readability కోసం background పై ఉన్న content కు సరైన contrast ఇవ్వాలి.

Syntax

selector {
  background-attachment: fixed;
}

ఈ property పనిచేయాలంటే element కు background image లేదా background gradient ఉండాలి. ఈ lesson example లో external image అవసరం లేకుండా CSS gradient ను background image గా ఉపయోగిస్తున్నాం.

Simple Explanation

ఒక page ను scroll చేస్తున్నప్పుడు background image కూడా కదలాలా లేదా ఒకే చోట ఉండాలా అనేది background-attachment నిర్ణయిస్తుంది.

scroll అంటే background content తో పాటు కదులుతుంది. fixed అంటే background viewport కు అంటుకొని ఉంటుంది. local అంటే element లోని scrollable content తో background కదులుతుంది.

Real-Life Example

ఒక గాజు కిటికీ వెనుక ఉన్న కొండల దృశ్యాన్ని ఊహించండి. మీరు ముందున్న పుస్తక పేజీలను scroll చేసినా కొండల దృశ్యం ఒకే చోట కనిపిస్తే అది fixed background లాంటిది. పుస్తక పేజీలతో పాటు దృశ్యం కూడా కదిలితే అది scroll లాంటిది.

Code Examples

Fixed Background Attachment Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background Attachment</title>
  <style>
    body {
      margin: 0;
      min-height: 1500px;
      font-family: Arial, sans-serif;
      color: #ffffff;
      background-image: linear-gradient(135deg, #163a5f, #3f87a6, #7fc8a9);
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
    }

    .content {
      max-width: 650px;
      margin: 80px auto;
      padding: 32px;
      background-color: rgba(0, 0, 0, 0.68);
      border-radius: 12px;
      line-height: 1.7;
    }

    .content h1 {
      margin-top: 0;
    }
  </style>
</head>
<body>
  <main class="content">
    <h1>Fixed Background</h1>
    <p>Scroll the page and notice that the background stays attached to the viewport.</p>
    <p>CSS background-attachment controls this scrolling behavior.</p>
  </main>
</body>
</html>

ఈ complete page లో body కు gradient background ఇచ్చి, background-attachment: fixed; ఉపయోగించాం. Page కు ఎక్కువ height ఇవ్వడానికి min-height: 1500px పెట్టాం, కాబట్టి browser లో scroll bar కనిపిస్తుంది. Scroll చేసినప్పుడు content కదులుతుంది, కానీ background viewport కు fixed గా కనిపిస్తుంది.

Browser లో నీలం, ఆకుపచ్చ రంగులతో కూడిన gradient background కనిపిస్తుంది. మధ్యలో dark transparent box లో Fixed Background heading మరియు రెండు paragraphs కనిపిస్తాయి. Page ను scroll చేసినప్పుడు content కదులుతుంది, కానీ background viewport కు స్థిరంగా కనిపిస్తుంది.

Line-by-Line Explanation

body {
ఈ selector మొత్తం page యొక్క body element ను ఎంచుకుంటుంది. Background attachment ను body పై ఉపయోగిస్తున్నాం.

min-height: 1500px;
Body కి ఎక్కువ కనీస ఎత్తు ఇస్తుంది. దీని వల్ల page scroll చేయడానికి తగినంత content area ఏర్పడుతుంది.

background-image: linear-gradient(135deg, #163a5f, #3f87a6, #7fc8a9);
External image అవసరం లేకుండా gradient ను background image గా సెట్ చేస్తుంది. background-attachment ప్రభావాన్ని చూపడానికి background image అవసరం.

background-attachment: fixed;
ఇది ఈ lesson లోని ప్రధాన declaration. Background ను browser viewport కు fixed గా ఉంచుతుంది. Page scroll చేసినప్పుడు foreground content మాత్రమే కదులుతుంది.

background-size: cover;
Gradient మొత్తం body area ను cover చేసేలా background పరిమాణాన్ని సర్దుతుంది. ఇది background image యొక్క size ను నియంత్రిస్తుంది.

.content {
content class ఉన్న main element ను ఎంచుకుంటుంది. ఈ box లో కనిపించే text ను background పై readable గా ఉంచడానికి styling ఇస్తున్నాం.

background-color: rgba(0, 0, 0, 0.68);
Content box కు కొంత పారదర్శకమైన dark background ఇస్తుంది. దీని వల్ల వెనుక gradient కనిపించినా తెల్లని text స్పష్టంగా చదవవచ్చు.

ఈ HTML element page యొక్క ప్రధాన content ను కలిగి ఉంటుంది. content class వల్ల దీనికి CSS లోని .content styles వర్తిస్తాయి.

Fixed Background

Page లో ప్రధాన heading ను చూపిస్తుంది. ఇది background attachment ఎలా పనిచేస్తుందో చెప్పే visible text.

Scroll the page and notice that the background stays attached to the viewport.

User page ను scroll చేసి fixed background ప్రభావాన్ని గమనించాలని ఈ paragraph చెబుతుంది.

Try It

Try this CSS code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Try Background Attachment</title>
  <style>
    body {
      margin: 0;
      min-height: 1200px;
      font-family: Arial, sans-serif;
      color: white;
      background-image: linear-gradient(120deg, #244b74, #62a87c);
      background-attachment: fixed;
      background-size: cover;
    }

    .card {
      max-width: 500px;
      margin: 100px auto;
      padding: 30px;
      background-color: rgba(0, 0, 0, 0.7);
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <section class="card">
    <h1>Try Scrolling</h1>
    <p>Change background-attachment and compare the result.</p>
  </section>
</body>
</html>

Try It Yourself »

Practice

Practice: పై code లో body యొక్క background page scroll చేసినప్పుడు viewport కు స్థిరంగా ఉండేలా మార్చండి.

Hint: background-attachment property లో scroll value ను fixed గా మార్చండి.

Common Mistakes

background-attachment property ను రాసినా background-image ఇవ్వలేదు.
ఈ property ప్రభావాన్ని చూడటానికి అదే element కు background-image లేదా CSS gradient ఇవ్వండి.

background-attachment: fix;
సరైన value fixed. CSS value spelling ను పూర్తిగా మరియు సరిగ్గా రాయాలి.

background-attachment ను content element పై పెట్టి page scroll చేస్తే తప్పకుండా fixed effect వస్తుందని అనుకోవడం.
fixed effect viewport కు సంబంధించి కనిపించడానికి body లేదా పెద్ద background section వంటి సరైన element పై property ను apply చేయండి.

Page లో scroll చేయడానికి సరిపడా height లేదా content లేకపోయినా fixed effect పరీక్షించడం.
min-height లేదా ఎక్కువ content ఉపయోగించి page ను scrollable గా మార్చండి.

Interview Questions

background-attachment property దేనిని నియంత్రిస్తుంది?

Answer: Page లేదా element scroll అయినప్పుడు background image ఎలా ప్రవర్తించాలో background-attachment నియంత్రిస్తుంది.

background-attachment: fixed; అంటే ఏమిటి?

Answer: Background image browser viewport కు fixed గా ఉంటుంది. Foreground content scroll అయినా background ఒకే స్థలంలో కనిపిస్తుంది.

background-attachment యొక్క default value ఏమిటి?

Answer: దీని default value scroll. ఈ value లో background content తో కలిసి scroll అవుతుంది.

background-attachment: local; ఎప్పుడు ఉపయోగిస్తారు?

Answer: Element లోపలే scroll అయ్యే content ఉన్నప్పుడు local ఉపయోగిస్తారు. Background ఆ element content తో కలిసి scroll అవుతుంది.

Exam Questions

ఖాళీని పూరించండి: Background ను viewport కు స్థిరంగా ఉంచడానికి ______ ఉపయోగిస్తాం.

Answer:

background-attachment: fixed;

background-attachment property యొక్క default value ఏది?

Answer:

scroll

True or False: background-attachment property background image scrolling behavior ను నియంత్రిస్తుంది.

Answer:

True

background-attachment: scroll మరియు fixed మధ్య ఒక తేడా చెప్పండి.

Answer:

scroll లో background content తో కలిసి కదులుతుంది. fixed లో background viewport కు స్థిరంగా ఉంటుంది.

Quick Revision

background-attachment background image scroll behavior ను నియంత్రిస్తుంది.
scroll default value; background content తో పాటు కదులుతుంది.
fixed value; background viewport కు స్థిరంగా ఉంటుంది.
local value; element లోని scrollable content తో background కదులుతుంది.
ఈ property ప్రభావాన్ని చూడటానికి background-image లేదా gradient మరియు scroll అయ్యే page అవసరం.

Background Attachment