Background Repeat and Position

ఒక element కి background image ఇచ్చినప్పుడు, ఆ image box లో ఎలా పునరావృతం కావాలి మరియు ఎక్కడ కనిపించాలి అనేది నియంత్రించడానికి background-repeat మరియు background-position properties ఉపయోగిస్తాము.

background-repeat

background-repeat background image ను మళ్లీ మళ్లీ చూపించాలా లేదా ఒక్కసారి మాత్రమే చూపించాలా అని నిర్ణయిస్తుంది.

repeat – image horizontal మరియు vertical దిశల్లో పునరావృతం అవుతుంది. ఇది default value.
repeat-x – image horizontal దిశలో మాత్రమే పునరావృతం అవుతుంది.
repeat-y – image vertical దిశలో మాత్రమే పునరావృతం అవుతుంది.
no-repeat – image ఒక్కసారి మాత్రమే కనిపిస్తుంది.

background-position

background-position background image కనిపించే స్థానం నిర్ణయిస్తుంది.

left top – ఎడమ పై మూలలో image కనిపిస్తుంది.
center center – మధ్యలో image కనిపిస్తుంది.
right bottom – కుడి కింది మూలలో image కనిపిస్తుంది.
20px 10px – ఎడమ నుంచి 20px, పై నుంచి 10px దూరంలో image కనిపిస్తుంది.

మొదటి value సాధారణంగా horizontal position ను, రెండవ value vertical position ను సూచిస్తుంది.

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

Pattern backgrounds, decorative icons, banners, cards మరియు page sections లో background image యొక్క repeat మరియు location ను నియంత్రించడానికి ఈ properties ఉపయోగపడతాయి.

ముఖ్యమైన విషయం

background-repeat image పునరావృతాన్ని నియంత్రిస్తుంది. background-position image ప్రారంభమయ్యే స్థానాన్ని నియంత్రిస్తుంది. Image ఎంత పెద్దదిగా కనిపించాలి అనే విషయం ఈ lesson పరిధిలో లేదు; అది తరువాతి lesson లో నేర్చుకుంటాము.

Simple Explanation

ఒక చిన్న wallpaper ను పెద్ద గోడపై అంటిస్తున్నట్లు ఊహించండి. ఆ wallpaper ను మొత్తం గోడపై repeat చేయవచ్చు, ఒక దిశలో మాత్రమే repeat చేయవచ్చు లేదా ఒక్కసారి మాత్రమే ఉంచవచ్చు. అలాగే ఆ wallpaper ను గోడ మధ్యలో, మూలలో లేదా మనకు కావలసిన distance వద్ద ఉంచవచ్చు. CSS లో repeat కోసం background-repeat, స్థానం కోసం background-position ఉపయోగిస్తాము.

Real-Life Example

ఒక gift-wrapping paper పై ఉన్న చిన్న pattern ను ఒక card వెనుక భాగంలో repeat చేయాలనుకుంటే background-repeat: repeat ఉపయోగించవచ్చు. ఒక logo ను card యొక్క కుడి కింది మూలలో ఒక్కసారి మాత్రమే ఉంచాలనుకుంటే background-repeat: no-repeat మరియు background-position: right bottom ఉపయోగించవచ్చు.

Code Examples

Background Image ను Repeat చేసి Position చేయడం

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Background Repeat and Position</title>
  <style>
    .pattern-box {
      width: 360px;
      height: 180px;
      padding: 20px;
      color: #12324a;
      border: 3px solid #2b6f9e;
      background-color: #eaf6ff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='8' cy='8' r='4' fill='%232b6f9e'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-position: 10px 10px;
    }

    .logo-box {
      width: 360px;
      height: 120px;
      margin-top: 20px;
      padding: 20px;
      color: #ffffff;
      background-color: #24415c;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Ccircle cx='30' cy='20' r='12' fill='%23ffd166'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right bottom;
    }
  </style>
</head>
<body>
  <div class="pattern-box">
    The small dot pattern repeats across this box.
  </div>

  <div class="logo-box">
    The circle appears once at the bottom right.
  </div>
</body>
</html>

మొదటి box లో చిన్న dot image మొత్తం box అంతటా repeat అవుతుంది. background-position: 10px 10px వల్ల repeat pattern మొదటి స్థానం ఎడమ నుంచి 10px, పై నుంచి 10px వద్ద ప్రారంభమవుతుంది. రెండవ box లో no-repeat వల్ల circle ఒక్కసారి మాత్రమే కనిపిస్తుంది. right bottom వల్ల అది కుడి కింది మూలలో కనిపిస్తుంది.

మొదటి నీలం రంగు box లో చిన్న నీలం dots మొత్తం background పై repeat అవుతాయి. రెండవ dark blue box లో పసుపు circle ఒక్కసారి కుడి కింది మూలలో కనిపిస్తుంది.

Line-by-Line Explanation

.pattern-box {
ఈ selector pattern-box class ఉన్న మొదటి div ను ఎంచుకుంటుంది.

background-image: url(“data:image/svg+xml,…”);
ఒక చిన్న dot image ను background image గా ఇస్తుంది. ఇది external file పై ఆధారపడకుండా example ను runnable గా ఉంచుతుంది.

background-repeat: repeat;
Image ను horizontal మరియు vertical దిశల్లో మళ్లీ మళ్లీ చూపిస్తుంది. అందువల్ల box మొత్తం dots తో కనిపిస్తుంది.

background-position: 10px 10px;
Background image యొక్క ప్రారంభ స్థానాన్ని ఎడమ నుంచి 10px, పై నుంచి 10px వద్ద ఉంచుతుంది.

.logo-box {
logo-box class ఉన్న రెండవ div కోసం ప్రత్యేక background rules ప్రారంభమవుతాయి.

background-repeat: no-repeat;
Circle image ను repeat చేయకుండా ఒక్కసారి మాత్రమే చూపిస్తుంది.

background-position: right bottom;
ఒక్కసారి కనిపించే circle ను box యొక్క కుడి కింది మూలలో ఉంచుతుంది.

HTML document ముగుస్తుంది. Browser లో CSS rules తో styled page render అవుతుంది.

Try It

Try this CSS code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Background Position</title>
  <style>
    .card {
      width: 320px;
      height: 160px;
      padding: 20px;
      color: #17324d;
      border: 3px solid #4b86b4;
      background-color: #eef8ff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='8' cy='8' r='4' fill='%234b86b4'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-position: 10px 10px;
    }
  </style>
</head>
<body>
  <div class="card">
    Change the repeat and position values, then run the code.
  </div>
</body>
</html>

Try It Yourself »

Practice

Practice: పై code లో background image ను horizontal దిశలో మాత్రమే repeat అయ్యేలా మార్చండి. Pattern ను banner యొక్క center bottom వద్ద ప్రారంభించండి.

Hint: దీనికి background-repeat: repeat-x; మరియు background-position: center bottom; ఉపయోగించండి.

Common Mistakes

background-repeats అని property name ను తప్పుగా రాయడం.
సరైన property name background-repeat. CSS property spelling తప్పకుండా సరిగా ఉండాలి.

background-repeat: repeat-horizontal; అని value రాయడం.
Horizontal repeat కోసం సరైన value repeat-x. Vertical repeat కోసం repeat-y ఉపయోగించాలి.

background-position: bottom right top; వంటి మూడు position values ఇవ్వడం.
సాధారణంగా రెండు values ఉపయోగించండి: మొదటిది horizontal position, రెండవది vertical position. ఉదాహరణకు right bottom.

no-repeat ఇచ్చినా image చాలాసార్లు కనిపిస్తుందని అనుకోవడం.
no-repeat image ను ఒక్కసారి మాత్రమే చూపిస్తుంది. Image యొక్క స్థానం కోసం ప్రత్యేకంగా background-position ఇవ్వాలి.

Interview Questions

background-repeat property ఎందుకు ఉపయోగిస్తారు?

Answer: Background image ను repeat చేయాలా, horizontal లేదా vertical దిశలో మాత్రమే repeat చేయాలా, లేక ఒక్కసారి మాత్రమే చూపించాలా అనే విషయాన్ని నిర్ణయించడానికి ఉపయోగిస్తారు.

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

Answer: దాని default value repeat. అంటే image horizontal మరియు vertical దిశల్లో repeat అవుతుంది.

ఒక background image ను ఒక్కసారి మాత్రమే చూపించడానికి ఏ value ఉపయోగిస్తారు?

Answer: background-repeat: no-repeat; ఉపయోగిస్తారు.

background-position: right bottom; అంటే ఏమిటి?

Answer: Background image element యొక్క కుడి కింది మూలలో కనిపిస్తుంది.

Exam Questions

Background image ను horizontal దిశలో మాత్రమే repeat చేయడానికి CSS declaration రాయండి.

Answer:

background-repeat: repeat-x;

Background image ను vertical దిశలో మాత్రమే repeat చేయడానికి ఏ value ఉపయోగిస్తారు?

Answer:

background-repeat: repeat-y;

Background image ను center లో ఉంచడానికి ఒక CSS declaration రాయండి.

Answer:

background-position: center center;

background-position: 20px 10px; లో రెండు values ఏ విషయాలను సూచిస్తాయి?

Answer:

మొదటి value horizontal position ను, రెండవ value vertical position ను సూచిస్తుంది. కాబట్టి image ఎడమ నుంచి 20px మరియు పై నుంచి 10px వద్ద ఉంచబడుతుంది.

Quick Revision

background-repeat background image repeat విధానాన్ని నియంత్రిస్తుంది.
repeat image ను రెండు దిశల్లో repeat చేస్తుంది.
repeat-x horizontal దిశలో, repeat-y vertical దిశలో repeat చేస్తాయి.
no-repeat image ను ఒక్కసారి మాత్రమే చూపిస్తుంది.
background-position image కనిపించే స్థానాన్ని నిర్ణయిస్తుంది.
రెండు position values లో మొదటిది horizontal, రెండవది vertical position.

Background Repeat and Position