Background Size and Cover

CSS లో background-size property ద్వారా background image లేదా gradient element లో ఎంత పరిమాణంలో కనిపించాలో నియంత్రించవచ్చు.

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

ఒక background image చిన్నదిగా ఉండవచ్చు లేదా element మొత్తం area ను cover చేయకపోవచ్చు. background-size ఉపయోగించి image ను చిన్నగా, పెద్దగా లేదా element మొత్తం area కు సరిపోయేలా చూపించవచ్చు.

ముఖ్యమైన values

auto: image యొక్క అసలు పరిమాణాన్ని ఉపయోగిస్తుంది.
cover: image element మొత్తం area ను cover చేస్తుంది. అవసరమైతే image యొక్క కొంత భాగం cut అవుతుంది.
contain: image పూర్తిగా కనిపించేలా element లో సరిపోతుంది. అవసరమైతే ఖాళీ ప్రదేశం కనిపించవచ్చు.
100% 100%: image ను element width మరియు height కు ఖచ్చితంగా stretch చేస్తుంది. దీనివల్ల image ఆకారం మారవచ్చు.

cover ఎలా పనిచేస్తుంది?

background-size: cover; పెట్టినప్పుడు browser background image యొక్క aspect ratio ను కాపాడుతూ element మొత్తం area ను నింపుతుంది. Image మరియు element proportions వేర్వేరుగా ఉంటే, image యొక్క కొంత భాగం కనిపించకుండా crop అవుతుంది.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Background Size Cover</title>
  <style>
    .hero {
      width: 360px;
      height: 220px;
      color: white;
      padding: 24px;
      box-sizing: border-box;
      background-image: linear-gradient(135deg, #2563eb, #7c3aed, #ec4899);
      background-size: cover;
      background-position: center;
    }
  </style>
</head>
<body>
  <section class="hero">
    <h1>Creative Space</h1>
    <p>The background covers the complete section.</p>
  </section>
</body>
</html>

ఈ example లో gradient ఒక background image లా పనిచేస్తుంది. background-size: cover; వల్ల gradient section యొక్క పూర్తి area ను నింపుతుంది.

cover మరియు contain మధ్య తేడా

cover element ను ఖాళీ లేకుండా నింపుతుంది, కానీ image యొక్క కొంత భాగం crop కావచ్చు. contain image మొత్తాన్ని చూపిస్తుంది, కానీ element లో ఖాళీ ప్రదేశం ఉండవచ్చు.

Hero sections, banner areas, profile cards మరియు full-card backgrounds కోసం cover చాలా ఉపయోగకరంగా ఉంటుంది.

Simple Explanation

background-size అంటే background image యొక్క size ను నిర్ణయించే CSS property.

background-size: cover; అంటే background image ను element మొత్తం area కు సరిపోయేలా పెద్దది చేయడం. Image యొక్క proportions మారకుండా ఉండటానికి browser అవసరమైన చోట crop చేస్తుంది.

background-size: contain; అంటే image మొత్తం కనిపించేలా element లో fit చేయడం. అందువల్ల కొన్ని సందర్భాల్లో ఖాళీ ప్రాంతం కనిపిస్తుంది.

Background image పూర్తిగా section ను నింపాలి అనుకుంటే సాధారణంగా cover ఉపయోగిస్తారు.

Real-Life Example

ఒక website లో travel banner ఉందని అనుకుందాం. Banner పరిమాణం desktop మరియు mobile లో మారుతుంది. Image ప్రతి పరిమాణంలో banner ను ఖాళీ లేకుండా నింపాలి. ఇలాంటి సందర్భంలో background-size: cover ఉపయోగిస్తే image banner మొత్తం area ను cover చేస్తుంది.

Code Examples

Using background-size: cover

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Background Size Cover</title>
  <style>
    .hero {
      width: 360px;
      height: 220px;
      color: white;
      padding: 24px;
      box-sizing: border-box;
      background-image: linear-gradient(135deg, #2563eb, #7c3aed, #ec4899);
      background-size: cover;
      background-position: center;
    }
  </style>
</head>
<body>
  <section class="hero">
    <h1>Creative Space</h1>
    <p>The background covers the complete section.</p>
  </section>
</body>
</html>

ఈ complete HTML page లో .hero section కి gradient background ఇచ్చాం. background-size: cover; వల్ల background section యొక్క width మరియు height రెండింటినీ పూర్తిగా cover చేస్తుంది. background-position: center; వల్ల crop జరిగితే మధ్య భాగం ప్రాధాన్యంగా కనిపిస్తుంది.

Browser లో 360px వెడల్పు మరియు 220px ఎత్తు ఉన్న ఒక section కనిపిస్తుంది. అది నీలం, ఊదా మరియు గులాబీ రంగుల gradient తో పూర్తిగా నిండి ఉంటుంది. Section లో Creative Space heading మరియు ఒక paragraph తెలుపు రంగులో కనిపిస్తాయి.

Comparing cover and contain

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cover and Contain</title>
  <style>
    .box {
      width: 260px;
      height: 150px;
      margin: 12px 0;
      border: 2px solid #222222;
      background-image: linear-gradient(135deg, #f97316, #facc15);
      background-repeat: no-repeat;
      background-position: center;
      background-color: #e5e7eb;
    }

    .cover {
      background-size: cover;
    }

    .contain {
      background-size: contain;
    }
  </style>
</head>
<body>
  <div class="box cover">Cover</div>
  <div class="box contain">Contain</div>
</body>
</html>

మొదటి box లో cover ఉపయోగించాం. అది box మొత్తం area ను నింపుతుంది. రెండవ box లో contain ఉపయోగించాం. అది background ను పూర్తిగా చూపించడానికి ప్రయత్నిస్తుంది. ఈ తేడాను గమనించడానికి background-repeat: no-repeat మరియు background color కూడా ఇచ్చాం.

Browser లో రెండు 260px వెడల్పు boxes కనిపిస్తాయి. మొదటి box లో background మొత్తం area ను cover చేస్తుంది. రెండవ box లో background పూర్తిగా కనిపించేలా fit అవుతుంది మరియు చుట్టూ background color ఖాళీ ప్రాంతం కనిపించవచ్చు.

Line-by-Line Explanation

.hero {
ఈ selector class=”hero” ఉన్న HTML element ను ఎంచుకుంటుంది. Background styling ఈ section కు వర్తిస్తుంది.

width: 360px;
Hero section వెడల్పును 360 pixels గా నిర్ణయిస్తుంది.

height: 220px;
Hero section ఎత్తును 220 pixels గా నిర్ణయిస్తుంది. Background cover పనిచేయడానికి element కు స్పష్టమైన area ఇస్తుంది.

color: white;
Section లోని text తెలుపు రంగులో కనిపిస్తుంది. ఇది gradient background పై చదవడానికి సులభంగా ఉంటుంది.

padding: 24px;
Section లోని heading మరియు paragraph అంచులకు అంటుకోకుండా 24 pixels లోపలికి వస్తాయి.

box-sizing: border-box;
Padding ను width మరియు height లెక్కల్లోనే పరిగణిస్తుంది. అందువల్ల section మొత్తం పరిమాణం 360px × 220px గా ఉంటుంది.

background-image: linear-gradient(135deg, #2563eb, #7c3aed, #ec4899);
Section కు నీలం, ఊదా మరియు గులాబీ రంగులతో gradient background ఇస్తుంది. ఈ gradient ఇక్కడ background image లా పనిచేస్తుంది.

background-size: cover;
Background ను section మొత్తం area ను నింపేలా సర్దుతుంది. అవసరమైతే background యొక్క కొంత భాగం crop అవుతుంది.

background-position: center;
Background లో crop అవసరమైనప్పుడు మధ్య భాగాన్ని section మధ్యలో ఉంచుతుంది.

}
Hero selector యొక్క CSS declarations ఇక్కడ ముగుస్తాయి.

ఈ HTML section కు hero class ఇస్తుంది. అందువల్ల పై .hero CSS rules ఈ element పై పనిచేస్తాయి.

Creative Space

Section లో ప్రధాన heading ను చూపిస్తుంది. ఇది background పై తెలుపు రంగులో కనిపిస్తుంది.

Try It

Try this CSS code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Background Cover</title>
  <style>
    .banner {
      width: 320px;
      height: 180px;
      padding: 20px;
      color: white;
      box-sizing: border-box;
      background-image: linear-gradient(120deg, #0891b2, #2563eb);
      background-size: cover;
      background-position: center;
    }
  </style>
</head>
<body>
  <div class="banner">
    <h2>Nature Banner</h2>
    <p>Change the background-size value and test it.</p>
  </div>
</body>
</html>

Try It Yourself »

Practice

Practice: పై practice code లోని green card background మొత్తం card area ను నింపేలా మార్చండి. ఏ CSS property value ను మార్చాలి?

Hint: background-size లో contain స్థానంలో cover value ఉపయోగించండి. తరువాత browser లో run చేసి result చూడండి.

Practice: Solution చూడకముందు background-size ను contain, cover మరియు 100% 100% గా ఒక్కొక్కసారి మార్చి వాటి మధ్య తేడాను గమనించండి.

Hint: cover ఖాళీ లేకుండా area ను నింపుతుంది, contain background ను పూర్తిగా చూపించడానికి ప్రయత్నిస్తుంది.

Common Mistakes

background-size property ను background-size: covers; అని plural value తో రాయడం.
సరైన value background-size: cover; మాత్రమే. cover కి చివర s ఉండదు.

background-size: cover; పెట్టినా background repeat అవుతుందని అనుకోవడం.
Cover image ను పెద్దది చేసి area ను నింపుతుంది. Repeat ఆపాలంటే అవసరమైనప్పుడు background-repeat: no-repeat; కూడా రాయాలి.

background-size: contain; తో element మొత్తం ఖాళీ లేకుండా నిండిపోతుందని అనుకోవడం.
contain image మొత్తాన్ని చూపిస్తుంది. Image మరియు element proportions వేర్వేరుగా ఉంటే ఖాళీ ప్రాంతం కనిపించవచ్చు.

background-size: 100% 100%; ఉపయోగించి ప్రతి image సరైన proportion లోనే ఉంటుందని అనుకోవడం.
ఈ value image ను width మరియు height రెండింటికీ stretch చేస్తుంది. Image ఆకారం మారవచ్చు. సాధారణంగా proportion కాపాడటానికి cover లేదా contain ఉపయోగించండి.

background-size ను HTML element లో కాకుండా తప్పు selector లో రాయడం.
Background ఉన్న element యొక్క సరైన class లేదా ID selector లో background-size declaration ను ఉంచండి.

Interview Questions

CSS లో background-size property ఉపయోగం ఏమిటి?

Answer: Background image లేదా gradient element లో ఏ పరిమాణంలో కనిపించాలో background-size నిర్ణయిస్తుంది.

background-size: cover; ఎలా పనిచేస్తుంది?

Answer: ఇది background ను element మొత్తం area ను నింపేలా సర్దుతుంది. Image యొక్క aspect ratio కాపాడుతుంది, కానీ అవసరమైతే కొంత భాగం crop అవుతుంది.

cover మరియు contain మధ్య ప్రధాన తేడా ఏమిటి?

Answer: cover element మొత్తం area ను ఖాళీ లేకుండా నింపుతుంది, కానీ image కొంత crop కావచ్చు. contain image మొత్తాన్ని చూపిస్తుంది, కానీ ఖాళీ ప్రాంతం ఉండవచ్చు.

background-size: cover తో పాటు background-position: center ఎందుకు ఉపయోగిస్తారు?

Answer: Crop జరిగితే background లోని ఏ భాగం మధ్యలో కనిపించాలో background-position నిర్ణయిస్తుంది. center ఉపయోగిస్తే మధ్య భాగం కనిపిస్తుంది.

Exam Questions

Background image ను element మొత్తం area కు సరిపోయేలా చేయడానికి ఏ value ఉపయోగిస్తారు?

Answer:

background-size: cover;

Background image పూర్తిగా కనిపించాలి, కానీ element లో ఖాళీ ప్రాంతం ఉండవచ్చు. ఏ value ఉపయోగించాలి?

Answer:

background-size: contain;

background-size: 100% 100%; యొక్క ఒక సమస్య ఏమిటి?

Answer:

ఇది image ను element width మరియు height కు stretch చేస్తుంది. అందువల్ల image యొక్క అసలు proportions మారవచ్చు.

క్రింది CSS లో background మొత్తం box ను నింపేలా ఏ మార్పు చేయాలి? .box { background-size: contain; }

Answer:

.box { background-size: cover; } అని మార్చాలి.

Quick Revision

background-size background image యొక్క పరిమాణాన్ని నియంత్రిస్తుంది.
cover element మొత్తం area ను నింపుతుంది; అవసరమైతే image crop అవుతుంది.
contain image మొత్తాన్ని చూపిస్తుంది; ఖాళీ ప్రాంతం ఉండవచ్చు.
background-position: center crop అయినప్పుడు మధ్య భాగాన్ని చూపించడానికి ఉపయోగపడుతుంది.
100% 100% image ను stretch చేయవచ్చు; దాని proportions మారే అవకాశం ఉంది.
Hero sections, banners మరియు cards కు background-size: cover; సాధారణంగా ఉపయోగకరమైనది.

Background Size and Cover