CSS Backgrounds Complete Guide: Everything You Need to Know

Web design में visual appeal का बहुत बड़ा योगदान होता है। जब आप कोई Website बनाते हैं, तो उसके background elements User का ध्यान आकर्षित करने में सबसे महत्वपूर्ण भूमिका निभाते हैं। CSS Backgrounds properties का उपयोग करके आप किसी भी HTML element के background को पूरी तरह से customize कर सकते हैं।

Vivaa Technologies के इस विस्तृत Tutorial में हम CSS Backgrounds की सभी प्रमुख properties को विस्तार से समझेंगे ताकि आप अपनी Website को और अधिक आकर्षक बना सकें।

1. CSS Background Color

background-color property का उपयोग किसी भी element का background color set करने के लिए किया जाता है। आप colors को अलग-अलग तरीके से define कर सकते हैं, जैसे कि Color Names, Hex Codes, RGB, या HSL values।

Code Example:

CSS

/* Using Color Name */
body {
  background-color: lightblue;
}

/* Using Hex Code */
div {
  background-color: #f4f4f4;
}

/* Using RGB with Opacity */
header {
  background-color: rgba(0, 0, 0, 0.5);
}

rgba() का उपयोग करके आप background color की opacity या transparency को भी आसानी से control कर सकते हैं।

2. CSS Background Image

यदि आप background में color के बजाय कोई image लगाना चाहते हैं, तो background-image property का उपयोग किया जाता है। इसके लिए url() function का प्रयोग होता है।

Code Example:

CSS

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

by default, यदि आपकी image screen size से छोटी है, तो CSS उस image को पूरे background में repeat कर देता है।

3. CSS Background Repeat

Image के automatic repetition को control करने के लिए background-repeat property का इस्तेमाल होता है।

इसके प्रमुख values निम्नलिखित हैं:

• no-repeat: Image को केवल एक बार दिखाता है, repeat नहीं करता।

• repeat-x: Image केवल horizontally (x-axis) repeat होती है।

• repeat-y: Image केवल vertically (y-axis) repeat होती है।

• repeat: यह default value है, जिससे image दोनों तरफ repeat होती है।

Code Example:

CSS

div {
  background-image: url("pattern.png");
  background-repeat: no-repeat;
}

4. CSS Background Position

background-position property यह तय करती है कि आपकी background image, element के अंदर किस जगह place होगी।

आप keywords (top, bottom, left, right, center) या percentage और pixels का उपयोग कर सकते हैं।

Code Example:

CSS

header {
  background-image: url("logo.png");
  background-repeat: no-repeat;
  background-position: right top;
}

5. CSS Background Size

Modern web design में background-size property बहुत ही उपयोगी है। यह background image की scaling को control करने में मदद करती है।

मुख्य values:

• cover: Image को इस तरह scale करता है कि पूरा container cover हो जाए। इसमें image का कुछ हिस्सा कट सकता है।

• contain: Image को इस तरह scale करता है कि पूरी image बिना कटे दिखाई दे।

• Custom values: आप pixels या percentage में भी width और height दे सकते हैं जैसे 100% 100%।

Code Example:

CSS

.hero-section {
  background-image: url("hero.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

6. CSS Background Attachment

background-attachment property यह तय करती है कि scroll करने पर background image अपनी जगह fixed रहेगी या content के साथ scroll होगी।

• scroll: यह default value है। Image content के साथ scroll होती है।

• fixed: Image अपनी जगह पर fixed रहती है, जबकि content scroll होता है। इसे Parallax Effect के नाम से जाना जाता है।

Code Example:

CSS

.parallax {
  background-image: url("bg.jpg");
  background-attachment: fixed;
  background-size: cover;
}

7. CSS Background Shorthand Property

इन सभी अलग-अलग properties को एक साथ एक ही लाइन में लिखने के लिए आप background shorthand property का उपयोग कर सकते हैं।

Order: background-color, background-image, background-repeat, background-attachment, background-position.

Code Example:

CSS

body {
  background: #ffffff url("bg.png") no-repeat fixed center;
}

Conclusion

CSS Backgrounds properties आपकी Website के look और feel को पूरी तरह बदल सकती हैं। इन basic और advance concepts का practice करके आप responsive और modern layouts आसानी से तैयार कर सकते हैं। Vivaa Technologies हमेशा आपको practical coding tutorial प्रदान करने के लिए प्रतिबद्ध है। अपनी Web Development journey को बेहतर बनाने के लिए रोजाना practice करते रहें।