CSS Background Property Guide in Hindi and English for Beginners (2025)

CSS Background Property in Hindi (2025) – Beginners ke Liye Simple Guide with Examples

by

Namaskar Dosto

Agar aap web design seekh rahe ho, toh CSS ki background property aapko zaroor aani chahiye. Ye ek important concept hai jo aapki website ko visually attractive banata hai.

Is article mein aap seekhenge:

  • CSS background property kya hoti hai
  • CSS background image kaise lagaye
  • Sabhi important background properties with simple examples

1. CSS Background Property kya hoti hai?

CSS background property ka use kisi HTML element ke background ka color, image, position, size, attachment, repeat behavior define karne ke liye hota hai. Ye visual presentation ko enhance karta hai.

2. CSS Background Property kyu important hai?

  • Website ko attractive banata hai
  • User experience improve karta hai
  • Branding aur design consistency maintain karta hai
  • User engagement badhata hai

3. CSS Background ke Important Properties

• background-color kya hota hai?

Ye property kisi element ka background color set karti hai.

div {
  background-color: lightblue;
}

• background-image kya hota hai?

Ye property kisi image ko background ke roop mein set karti hai.

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

• background-repeat kya karta hai?

Isse image ka repeat behavior control hota hai.

div {
  background-repeat: no-repeat;
}

• background-position kaise kaam karta hai?

Isse background image ki position set hoti hai.

div {
  background-position: center top;
}

• background-size kya hota hai?

Iska use background image ka size define karne ke liye hota hai.

div {
  background-size: cover;
}

• background-attachment kya hota hai?

Ye control karta hai ki background scroll kare ya fixed rahe.

div {
  background-attachment: fixed;
}

• background shorthand kya hota hai?

Sabhi background properties ek hi line mein likhne ke liye shorthand use hota hai.

div {
  background: url("image.jpg") no-repeat center/cover;
}

4. CSS Background Image kaise lagaye? (Step-by-Step)

  1. Apni HTML file mein ek element create karo (jaise <div>)
  2. CSS mein us element ka selector likho
  3. background-image property ke saath image ka path do

Example:

<div class="bg-image"></div>
.bg-image {
  width: 400px;
  height: 300px;
  background-image: url("nature.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

5. Common Mistakes in Background Properties

  • Incorrect URL path dena
  • Image ko compress na karna (load time badhta hai)
  • background-size na set karna jisse image crop ho sakti hai
  • Contrast na dekhna (text visible nahi hota)

6. CSS Background vs Inline Background: Kaunsa best hai?

Inline CSS:

<div style="background-color: red;"></div>

External CSS (recommended):

div {
  background-color: red;
}

External CSS best practice hai kyunki:

  • Reusable hota hai
  • Code maintain karna easy hota hai
  • Performance better hoti hai

7. Practice Code Example (Copy-Paste Ready)

<!DOCTYPE html>
<html>
<head>
  <style>
    .bg-box {
      width: 500px;
      height: 300px;
      background-image: url("https://www.w3schools.com/css/img_lights.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      border: 2px solid #000;
    }
  </style>
</head>
<body>

  <div class="bg-box"></div>

</body>
</html>

Practice Code Output

8. FAQs – Background Property se related common questions

Q1: Kya main ek element mein multiple background images laga sakta hoon?

Answer:
Haan, aap background-image property mein comma‑separated URLs lagaakar ek element par ek se zyada background images apply kar sakte ho. Ye images top‑to‑bottom layer hoti hain — jo pehli di hoti hai, vo sabse upar dikhegi, baaki peeche.

element {
background-image: url(‘img1.png’), url(‘img2.png’);
background-position: top right, bottom left;
background-repeat: no-repeat, repeat;
}

Yeh technique multiple backgrounds ke liye W3Schools aur MDN dono recommend karte hain

Q2: Mobile pe background image responsive kaise banayein?

Answer:
background-size: cover; ka use karke image element ke area ko poora cover karti hai bina distortion ke. Iske saath background-position: center; add karo taaki image center se crop ho.
Aur agar aap bandwidth optimize karna chahte ho, to media queries ke zariye small screen ke liye lighter image serve karo

Q3: Background image fixed rakhna hai, kaise karein?

Answer:
Use karo background-attachment: fixed;. Isse background scroll nahi karega, sirf content scroll hota rahega.

element {
background: url(‘image.jpg’) center center / cover fixed no-repeat;
}

Q4: Ek element par sprites kaise use karte hain?

Answer:
CSS sprites mein ek single image hoti hai jismein multiple graphics bane hote hain. Aap background-position ke sath height/width fix karke specific section show kar sakte ho.

.icon {
width: 50px;
height: 50px;
background: url(‘sprite.png’) -100px -50px no-repeat;
}

Ye technique file requests kam karta hai aur performance bhi improve hoti hai

Q5: Background image ke upar text clear kaise dikhayein?

Answer:
Simple overlay technique use karo:

.hero {
position: relative;
background: url(‘hero.jpg’) center/cover no-repeat;
}
.hero::after {
content: ”;
position: absolute;
inset: 0;
background: rgba(0,0,0,0.4);
}
.hero-text {
position: relative;
color: #fff;
}

Yeh ensure karta hai text readily readable rahe even jab background image detailed ho.

Q6: Multiple background images ke sizes control kaise karein?

Answer:
Aap background-size ko comma‑separate values de sakte ho, har image ke liye.

element {
background-image: url(‘img1.png’), url(‘img2.png’);
background-size: 50px 50px, cover;
}

Isse first image fixed size hogi aur second full container ko cover karegi

Q7: Background-origin aur background-clip kya hota hai?

Answer:
=> background-origin: define karta hai ki background kis box se start kare (border-box, padding-box, content-box).
=>background-clip: determine karta hai ki background paint kis area tak dikhana hai.
Usecase: agar aapko border ke andar ya andar padding me hi background chahiye

Q8: Media queries ke sath background image optimize kaise karein?

Answer:
Responsive performance ke liye aap multiple background images serve kar sakte ho using media queries:

body {
background: url(‘large.jpg’) center/cover no-repeat fixed;
}
@media(max-width:767px) {
body {
background: url(‘small.jpg’) center/cover no-repeat;
}
}

Isse mobile users light image download karte hain, aur desktop pe high resolution image dikhai deti hai

9. Conclusion: Aapne kya seekha?

Toh dosto Is article mein aapne CSS background property ke sabhi basic aur important concepts seekhe jaisa ki:

  • Background image kaise lagate hain
  • Alag-alag background properties ka use
  • Common mistakes aur practice code

Agar aap CSS aur HTML mein expert banna chahte ho toh aap W3Schools CSS Background Guide ko bhi padh sakte ho for extra learning.

Next Article Zaroor Padhein:

Toh Dosto Ab Agar aapko yeh article helpful laga ho to ise share karein, comment karein, aur apne doston ko bhi recommend karein.
Next article kis topic par chahiye? Comment karke zarur batao.

Written by: Aditya (Programming Sikho)

Spread the love

Leave a Comment