CSS Background हिन्दी में सीखें- Learn CSS Background in Hindi

इस आर्टिकल में css background हिन्दी में सिखाने के बारे में बताया गया है। Background के लिए css में बहुत सी properties और values दी गई है जिनका प्रयोग आप अपनी जरूरत के हिसाब से कर सकते हो।

क्या आप css को सीख रहे हो? क्या आपने हमारी css के सभी article को पढ़ा है , यदि नहीं तो आप हमारे learn css के tutorial को पूरा step by step पढ़ें।

परिभाषा :- किसी html element के background effects को define करने के लिए css background properties का इस्तेमाल किया जाता है।

All CSS Background हिन्दी में

CSS में बहुत सी background properties होती है जिनको आप अपनी जरूरत के हिसाब से प्रयोग कर सकते हो। CSS background हिन्दी में आपको सिखाने के लिए इस आर्टिकल को special तौर पर तैयार किया गया है।

1.Background

सभी बैकग्राउंड प्रॉपर्टीस को एक साथ declare करने के लिए इसका प्रयोग होता है। यह एक shorthand property है जिसमें निम्नलिखित property को डिफाइन किया जा सकता है।
background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment

2.background-attachment

Background image को fixed या scroll करने के लिए इसका प्रयोग होता है। पेज को ऊपर -नीचे करते समय image scroll होनी चाहिए या fixed ,ये सब define करने के लिए css में background-attachment का प्रयोग किया जाता है।
CSS Syntax

Background-attachment values
scroll-इसमें background image पेज के साथ scroll होती है।
fixed -इसमें background image को एक जगह fixed कर दिया जाता है।
local-इसमें background image एक element के content के साथ scroll होती है।
initial-background image की default value सेट करने के लिए
inherit-parent element की वैल्यू को inherit करने के लिए।
जैसे:-

3.background-clip

CSS Syntax

Background-clip all values
आप background clip को नीचे दी गई values में से कोई भी वैल्यू देकर specify कर सकते हो।
border-box:-इसमें background को border एरिया के पीछे तक विस्तार (extend ) किया जाता है।
padding-box:- इसमें background को border के अंदरूनी किनारे तक फैलाया जाता है।
content-box :-इसमें बैकग्राउंड को content एरिया के किनारे तक फैलाया जाता है।
initial :- default वैल्यू set करने के लिए।
inherit :- Parent element की वैल्यू दिखाने के लिए

4. Background-color

किसी element के background color को सेट करने के लिए background-color property का प्रयोग किया जाता है। Background किसी element की padding और border को मिलाकर total size जितना होता है । इसमें Margin को शामिल नहीं किया जाता।
CSS Syntax

transparent value – किसी element के background color को transparent करने के लिए इसका use किया जाता है। सभी elements का background कलर by default transparent ही होता है।
color– किसी element के background color को specify करने के लिए css color का प्रयोग किया जाता है। Color के लिए आप हमारा css color property आर्टिकल जरूर पढ़ें।

Must Read :-

Learn CSS In Hindi-CSS सीखें हिन्दी में

CSS Selector क्या है और इसका use कैसे किया जाता है?

CSS Color property को कैसे use किया जाता है-हिन्दी में

CSS Border Property का प्रयोग कैसे करें- हिन्दी मे पूरी जानकारी

CSS Border Property का प्रयोग कैसे करें- हिन्दी मे पूरी जानकारी

CSS Outline Property का Use कैसे करें- हिन्दी में जानकारी

5. background-image

किसी element के background में एक या एक से अधिक images को सेट करने के लिए background image property का इस्तेमाल किया जाता है।By default एक background image को एक element के top-left corner में ही रखा जाता है।
CSS Syntax

नोट:-हमेशा image के साथ background-color जरूर set करें ताकि यदि image अगर load ना हो तो background कलर show हो सके।
Property Value
आप background-image property को ये values दे सकते हो:
url(‘URL’)– इसमें URL की जगह image का यूआरएल लिखा जाता है। एक से ज्यादा images को दिखाने के लिए koma (,) देकर आप जितनी मर्जी images लगा सकते हो।
none – background image को display ना करने के लिए।

6. linear-gradient( )

Background image के रूप में अलग-अलग color दिखाने के लिए linear gradient को set किया जाता है। इसके लिए आपको top to bottom के लिए कम से कम दो color को define करना पड़ेगा।
CSS Syntax

ज्यादातर इसमें id या class का प्रयोग किया जाता है। आप direction में to top, to bottom, to right और to left वैल्यू दे सकते हो। जो values आप color के लिए add करोगे , color भी उसी लाइन में show करेंगे।
Example :-

Output 

7. radial-gradient( )

– किसी element के background में image की जगह radial gradient कलर को सेट करने के लिए इसका प्रयोग किया जाता है। एक radial gradiebt को इसके center से define किया जाता है।
CSS Syntax

Property value
shape – Gradient की shape को define करने के लिए इसका प्रयोग होता है। इसमें ellipse और circle दो values में से कोई भी वैल्यू दे सकते हो।
size -Gradient के size को define करने के लिए इसका प्रयोग होता है,। आप साइज़ के लिए निम्नलिखित values दे सकते हो-
farthest-corner (default)
closest-side
closest-corner
farthest-side
position – Gradient की position को define करने के लिए । इसकी default वैल्यू “center” है।
color – कलर वैल्यू देने के लिए । इसमें आप कोई भी css color property में दी गई वैल्यू को use कर सकते हो।

8. background-origin

किसी element की background image के origin position यानि background position एरिया को define करने के लिए background-origin का प्रयोग होता है।
नोट-इस property का कोई effect नहीं पड़ेगा यदि background-attachment को “fixed” किया गया हो।
CSS Syntax

Property value
padding-box-इसमें background image , padding के किनारे ( Edge ) के ऊपर वाले left corner से start होगी।
border-box– इसमें background image ,border के ऊपर वाले left corner से start होगी।
content-box– इसमें background image , content के ऊपर वाले left corner से start होगी।
Example :-

Output:-

9. background-position

Background image की starting position को सेट करने के लिए background -position का प्रयोग किया जाता है।
By default , background image को एक element के top left corner पर रखा जाता है। अगर आप background-repeat property को define नहीं करते हो तो ये अपने-आप vertically और horizontally repeat होती रहती है।
Property value
आप position को set करने के लिए नीचे दी गई values को add कर सकते हो।
CSS Syntax

keyword Value :-यहाँ दी गई values में से आप कोई एक वैल्यू को ऐड कर सकते हो। यदि आप दी गई values में से सिर्फ एक keyword ही add करते हो तो दूसरी value अपने आप “center” में डिफाइन हो जाएगी।

• left top
• left center
• left bottom
• right top
• right center
• right bottom
• center top
• center center
• center bottom

x% y%-इसमें पहली value( x ) horizonal और दूसरी वैल्यू ( y ) vertical होती है। इसमें top left corner 0% 0% होता है और right bottom corner 100% 100% होता है। अगर आप सिर्फ एक वैल्यू ही specify करते हो तो दूसरी वैल्यू अपने आप 50% हो जाएगी। इसकी वैल्यू by default 0% 0% होती है।
xpas ypas – ये वैल्यू भी बिल्कुल ऊपर वाली वैल्यू की तरह होती है। इसमें भी first वैल्यू horizonal और दूसरी वैल्यू vertical होती है। इसमें top left corner 0 0 होता है। आप इसको डिफाइन करने के लिए कोई भी css units का इस्तेमाल कर सकते हो। जैसे- px, mm, pt etc.

10.background-repeat

एक background image को कब और कैसे repeat करना है ये सब background-repeat से set किया जाता है।
By default एक background image vertically और horizontally दोनों तरह से repeat होती रहती है।
Note – Background image हमेशा background-position के हिसाब से दिखाई देती है। अगर background-position को specify नहीं किया गया हो तो image element के top left corner में ही show होती है।
CSS Syntax

Property Value
repeat-इसमें background image vertically और horizontally दोनों तरह से repeat होती रहती है।
no-repeat– इसमें background image repeat नहीं होती । Image सिर्फ एक बार show होती है।
repeat x– इसमें background image केवल horizontally repeat होती रहती है।
repeat y– इसमें background image केवल vertically repeat होती रहती है।
space– इसमें image बिना किसी clipping ( कटिंग) के जितना possible हो repeat होती रहती है। इसमें पहली और आखिरी image element के दोनों ओर pin हो जाती है और बचे हुए white space को समान रूप से दिखाया जाता है।
round– इसमें भी image repeat होती रहती है परंतु इसमें कोई white space नहीं छोड़ा जाता है, यानि images के बीच में कोई gap नहीं होता। इसमें image को काट कर (squished) या फैला कर ( stretched) खाली स्थान को भरा जाता है।

11.background-size

किसी element की background image के साइज़ को specify करने के लिए background-size property का प्रयोग किया जाता है।
CSS Syntax

Property Value
आप background size के लिए निम्नलिखित values दे सकते हो-
auto– इसमें image अपने original size में display होती है। ये एक default वैल्यू होती है।
lenth– इसमें image की width और height को सेट किया जाता है। इसमें first वैल्यू width को सेट करती है जबकि second वैल्यू height को set करती है। अगर सिर्फ एक ही वैल्यू दी गई हो तो second value अपने आप “auto” set हो जाती है।
percentage– इसमें background image की width और height को parent element के हिसाब से percentage (%) में set किया जाता है।
cover– Container को cover करने के लिए इसमें background image को resize किया जाता है। इसके लिए image को फैलाया जाए या image का एक किनारा कट करना पड़े।
contain– इसमें background image को full visible बनाने के लिए resize किया जाता है।

इस पोस्ट में css background हिन्दी में सीखने के बारें में बताया गया था। उम्मीद है आपको इसके बारें में विस्तार से पता चल गया होगा। आप हमारे सभी css lession को पढ़ कर घर पर ही css को सीख सकते हो। किसी भी सुझाव या प्रश्न के लिए आप नीचे कमेन्ट कर सकते हो।