Background Images

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

CSSలో background-image propertyను ఉపయోగించి ఒక HTML element వెనుక imageను చూపించవచ్చు. ఇది elementలోని text లేదా contentకు వెనుక భాగంలో కనిపిస్తుంది.

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

Hero sections మరియు banners కోసం
Cards లేదా panelsకు visual design ఇవ్వడానికి
Web pageలో decorative backgrounds చూపించడానికి
Content వెనుక theme లేదా visual effect ఇవ్వడానికి

Syntax

selector {
  background-image: url("image-path");
}

url()లో image path లేదా image URLను ఇస్తాము. ఈ lessonలో external imageపై ఆధారపడకుండా, browserలోనే పనిచేసే చిన్న SVG imageను ఉపయోగిస్తున్నాము.

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

Background image అనేది elementలోని content కాదు. అది element వెనుక backgroundగా కనిపిస్తుంది. అందువల్ల text, heading లేదా buttonను HTMLలోనే రాయాలి; CSS background-image కేవలం imageను చూపిస్తుంది.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Background Image Example</title>
  <style>
    .banner {
      width: 320px;
      height: 180px;
      padding: 24px;
      color: white;
      background-color: #1f4e79;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%231f4e79'/%3E%3Ccircle cx='260' cy='45' r='30' fill='%23f6c453'/%3E%3Cpath d='M0 145 Q80 95 160 145 T320 145 V180 H0 Z' fill='%232d8bba'/%3E%3C/svg%3E");
      font-family: Arial, sans-serif;
    }

    .banner h1 {
      margin-top: 0;
    }
  </style>
</head>
<body>
  <section class="banner">
    <h1>Explore Nature</h1>
    <p>A background image can make a section attractive.</p>
  </section>
</body>
</html>

Expected Browser Result

Browserలో 320px వెడల్పు మరియు 180px ఎత్తు ఉన్న banner కనిపిస్తుంది. Banner వెనుక blue sky, yellow sun మరియు blue hill ఉన్న background image కనిపిస్తుంది. దాని మీద white heading మరియు paragraph కనిపిస్తాయి.

Simple Explanation

background-image property ఒక element వెనుక imageను ఉంచుతుంది.

ఉదాహరణకు:

.box {
  background-image: url("photo.jpg");
}

ఇక్కడ .box అనే elementకు photo.jpg backgroundగా ఉపయోగించబడుతుంది. background-colorను కూడా fallbackగా ఇవ్వవచ్చు. Image load కాకపోయినా, color కనిపించే అవకాశం ఉంటుంది.

Imageలో ముఖ్యమైన భాగం కనిపించేలా చేయడం, image repeat అవుతుందా లేదా, image position ఎలా ఉండాలి వంటి విషయాలను తదుపరి lessonలో నేర్చుకుంటాము.

Real-Life Example

ఒక travel websiteలో ఒక banner ఉందని ఊహించండి. ఆ bannerలో “Explore Nature” అనే text ఉంటుంది. ఆ text వెనుక mountains లేదా sky image కనిపిస్తే page మరింత attractiveగా ఉంటుంది. HTMLలో textను ఉంచి, CSSలో background-imageతో imageను వెనుక చూపించవచ్చు.

Code Examples

A Section with a Background Image

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Background Image Example</title>
  <style>
    .banner {
      width: 320px;
      height: 180px;
      padding: 24px;
      color: white;
      background-color: #1f4e79;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%231f4e79'/%3E%3Ccircle cx='260' cy='45' r='30' fill='%23f6c453'/%3E%3Cpath d='M0 145 Q80 95 160 145 T320 145 V180 H0 Z' fill='%232d8bba'/%3E%3C/svg%3E");
      font-family: Arial, sans-serif;
    }

    .banner h1 {
      margin-top: 0;
    }
  </style>
</head>
<body>
  <section class="banner">
    <h1>Explore Nature</h1>
    <p>A background image can make a section attractive.</p>
  </section>
</body>
</html>

ఈ exampleలో .banner sectionకు background-image propertyతో ఒక SVG imageను backgroundగా ఇచ్చాము. background-color fallbackగా పనిచేస్తుంది. HTMLలోని heading మరియు paragraph imageపై కనిపిస్తాయి.

A 320px wide and 180px high banner appears with a blue sky, yellow sun, and blue hill background image. White heading and paragraph text appear over the image.

Line-by-Line Explanation

.banner {
ఇది banner class ఉన్న HTML elementను select చేస్తుంది. ఈ selectorలోని styles ఆ sectionకు apply అవుతాయి.

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

height: 180px;
Banner ఎత్తును 180 pixelsగా నిర్ణయిస్తుంది. Background image కనిపించడానికి elementకు స్పష్టమైన height ఉండటం సహాయపడుతుంది.

padding: 24px;
Bannerలోని text చుట్టూ 24 pixels లోపలి space ఇస్తుంది. అందువల్ల text image అంచుకు అతుక్కుపోదు.

color: white;
Bannerలోని text రంగును whiteగా చేస్తుంది. Dark backgroundపై text సులభంగా చదవబడుతుంది.

background-color: #1f4e79;
Background image కనిపించకపోతే ఉపయోగపడే dark blue fallback colorను ఇస్తుంది.

background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’320′ height=’180′ viewBox=’0 0 320 180’%3E%3Crect width=’320′ height=’180′ fill=’%231f4e79’/%3E%3Ccircle cx=’260′ cy=’45’ r=’30’ fill=’%23f6c453’/%3E%3Cpath d=’M0 145 Q80 95 160 145 T320 145 V180 H0 Z’ fill=’%232d8bba’/%3E%3C/svg%3E”);
ఇదే ప్రధాన line. background-image property banner వెనుక imageను ఉంచుతుంది. url()లో self-contained SVG image ఇవ్వబడింది; అందువల్ల external file అవసరం లేదు.

font-family: Arial, sans-serif;
Bannerలోని text కోసం Arial fontను ఉపయోగిస్తుంది. ఇది background image conceptకు అవసరం కాకపోయినా, text readableగా కనిపించడానికి ఉపయోగపడుతుంది.

.banner h1 {
Bannerలో ఉన్న h1 headingను ప్రత్యేకంగా select చేస్తుంది.

margin-top: 0;
Heading పై భాగంలోని default marginను తొలగిస్తుంది. దాంతో heading paddingకు దగ్గరగా మరియు సరిగ్గా కనిపిస్తుంది.

Explore Nature

Bannerలో చూపించాల్సిన ప్రధాన headingను HTMLలో ఉంచుతుంది. ఇది background image కాదు; imageపై కనిపించే actual content.

A background image can make a section attractive.

Bannerలో ఒక చిన్న paragraphను చూపిస్తుంది. ఇది కూడా background image ముందు కనిపించే HTML content.

Try It

Try this CSS code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Background Image</title>
  <style>
    .card {
      width: 300px;
      height: 160px;
      padding: 20px;
      color: white;
      background-color: #234;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='160'%3E%3Crect width='300' height='160' fill='%23336699'/%3E%3Ccircle cx='240' cy='45' r='28' fill='%23ffd166'/%3E%3C/svg%3E");
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>My Travel Card</h2>
    <p>Change the background-image value and test it.</p>
  </div>
</body>
</html>

Try It Yourself »

Practice

Practice: పై codeలో .welcome sectionకు ఉన్న gray background imageను blue sky మరియు hill ఉన్న background imageగా మార్చండి. HTML textను మార్చాల్సిన అవసరం లేదు.

Hint: background-image propertyలోని url() valueను మార్చండి. background-colorను fallbackగా ఉంచవచ్చు.

Common Mistakes

background-image propertyను background-image-url లేదా backgroundimageగా తప్పుగా రాయడం.
సరైన property పేరు background-image. ఉదాహరణ: background-image: url(“photo.jpg”);

url()ను వదిలి image pathను నేరుగా ఇవ్వడం.
Image pathను url()లో రాయాలి. ఉదాహరణ: background-image: url(“images/sky.jpg”);

background image చూపించాల్సిన elementకు width లేదా height లేకపోవడం.
Elementలో content లేకపోతే ముఖ్యంగా width మరియు height ఇవ్వండి. అప్పుడు background image కనిపించడానికి స్థలం ఉంటుంది.

HTMLలో imageను contentగా పెట్టి, CSS background imageతో గందరగోళం చేయడం.
Background image element వెనుక ఉంటుంది. Heading లేదా paragraph వంటి actual contentను HTMLలోనే ఉంచాలి.

background-image declaration చివర semicolon పెట్టకపోవడం, ముఖ్యంగా దాని తరువాత declarations ఉన్నప్పుడు.
ప్రతి CSS declaration చివర semicolon పెట్టండి. ఉదాహరణ: background-image: url(“photo.jpg”);

Interview Questions

CSSలో background image పెట్టడానికి ఏ property ఉపయోగిస్తారు?

Answer: CSSలో background image పెట్టడానికి background-image property ఉపయోగిస్తారు.

background-image propertyలో image pathను ఎలా రాస్తారు?

Answer: Image pathను url() functionలో రాస్తారు. ఉదాహరణ: background-image: url(“photo.jpg”);

Background image మరియు HTML image మధ్య తేడా ఏమిటి?

Answer: HTML image contentలో భాగంగా ఉంటుంది. Background image CSS ద్వారా element వెనుక కనిపిస్తుంది మరియు సాధారణంగా decorative purpose కోసం ఉపయోగిస్తారు.

background-colorను background-imageతో పాటు ఎందుకు ఇస్తారు?

Answer: Image load కాకపోయినా లేదా కనిపించకపోయినా fallback colorగా కనిపించడానికి background-colorను ఇవ్వవచ్చు.

Exam Questions

ఒక .hero elementకు banner.jpgను backgroundగా పెట్టే CSS రాయండి.

Answer:

.hero { background-image: url(“banner.jpg”); }

క్రింది declarationలో ఉపయోగించిన CSS property పేరు ఏమిటి? background-image: url(“mountain.jpg”);

Answer:

ఆ property పేరు background-image.

Background image elementలోని textపై కనిపిస్తుందా లేదా text వెనుక కనిపిస్తుందా?

Answer:

Background image elementలోని text వెనుక కనిపిస్తుంది.

Quick Revision

Background image కోసం background-image property ఉపయోగించాలి.
Image pathను url() functionలో రాయాలి.
ఉదాహరణ: background-image: url(“photo.jpg”);
Background image HTML content వెనుక కనిపిస్తుంది.
Image load కాకపోతే fallback కోసం background-color ఇవ్వవచ్చు.
తదుపరి lessonలో background image repeat మరియు position గురించి నేర్చుకుంటాము.

Background Images