Google search engine

css background property और css backgrounds हिंदी में

आपने आज तक जितनी भी website देखी है सभी में CSS Background property का इस्तेमाल किया हुआ देखा होगा जैसे आपने किसी image, box, text में color किया हुआ gradient color, website में scroll करने पर background image fix तथा image को laptop, mobile या desktop में खोलने पर उसका size सही दिखाई देता है.

यह सब CSS background के द्वारा होता है CSS background की बहुत सारी property है जिनका इस्तेमाल हम webpage को ज्यादा आकर्षित बनाने के लिए करते है.

background css properties क्या है और उनका इस्तेमाल हिंदी में

CSS में background property का इस्तेमाल किसी भी website को आकर्षित बनाने के लिए करते है. तथा background property को हम Inline CSS , Internal CSS और External CSS कहीं भी इस्तेमाल कर सकते है.

background की बहुत सारी property है जिनका इस्तेमाल बहुत ज्यादा किया जाता है वह है – background-color, background-image, background-repeat, background-size, background-position, background-attachment आदि.

css background property in hindi

1) css background image in hindi

background-image के द्वारा हम किसी भी webpage में image लगा सकते है तथा हम उस image को हम जैसे – .jpg, .png, .jpeg, .gif किसी भी format में लगा सकते है. background से image लगाने के लिए हम url के अंदर image folder के साथ image का path देते है हम केवल background लिखकर भी background-image का path दे सकते है.

इसमें से आप background या background-image में से किसी एक चीज़ का उपयोग करें.

2) Background color css

background-color का इस्तेमाल हम किसी भी website में box तथा text का color देने के लिए करते है तथा color को हम rbg, rgba, hex , hsl तथा color का नाम देकर लिख सकते है background-color की जगह हम केवल background लिखकर भी color दे सकते है.

3) Image size property in css

हमे अगर अपने website में कोई box या image लगाना है जिसका size हमें कम तथा ज्यादा करना है उसके लिए हम css में image या box को width या height देते है जिसे हम px (pixel) या % (precentage) में दे सकते है.

4) Repeat background image in css

webpage में जब हम background से image लगाते है वह x यानि की left से right तथा y यानि की top से bottom में repeat होता है यानि की एक ही image बहुत बार दिखती है. image एक ही बार repeat हो इसके लिए हम css background repeat property का इस्तेमाल करते है अगर हमें एक ही image चाहिए.

तो उसके लिए background में no-repeat लिखते है इससे x तथा y दोनों जगह repeat नहीं होती है अगर हमें किसी image को left से right repeat करना है तो हम background-repeat-x: repeat; का इस्तेमाल करते है. top से bottom repeat कराना है तो background-repeat-y: repeat; का इस्तेमाल करते है.

5) css background size

background में image लगाने पर हम उसे अपने computer में देखते है वह पर वह सही दिखाई देती है लेकिन mobile में देखने पर वह बहुत बड़ी दिखाई देती है या computer पर width, height सही नहीं दिखाई देता है जिसके लिए हम background-size का इस्तेमाल करते है. जिसमे हम cover, contain और 100% का इस्तेमाल करते है.

background-size: cover; देने से image को जितनी जगह मिलती है वह अपने पूरे size को cover कर लेता है तथा mobile में भी वह अपने size को cover करके रखता है जो बहुत बड़े size में दिखाई देता है.

और background-size: contain; रखने से image screen के size के हिसाब से adjust हो जाती है जिससे हमे image छोटे बड़े दोनों size में सही दिखाई देती है. और background-size: 100% 100%; देने से वह width और height दोनों जगह से 100 % size में fit हो जाती है.

6) position background css

अगर हमे webpage में किसी box के अंदर कोई image रखी है इस image को box के अंदर left right center कही पर भी रखना हो उसके लिए हम css background position का इस्तेमाल करते है.

इसमें से आप किसी एक position का इस्तेमाल कर सकते है.

7) Image opacity in css

website में अगर किसी image, box या text की opacity को कम करना हो यानि की धुंधला दिखाना हो उसके लिए हम opacity का इस्तेमाल करते है. 0.1 रखने में हमे image सबसे ज्यादा धुंधली और 1 में साफ दिखाई देती है तथा opacity 0 रखने पर image नहीं दिखाई देती है इसी तरह हम opacity को 0.1 से 1 तक अपने हिसाब से set कर सकते है.

8) background attachment property in css

background attachment के द्वारा हम किसी भी background द्वारा लगायी गई image को एक जगह fix कर सकते है. तथा webpage को scroll करने पर image एक जगह fix रहती है अगर आप चाहते है image webpage के scroll पर page के साथ ही scroll हो उसके लिए हम background-attachment: scroll; का उपयोग करते है.

ध्यान रहे image के नीचे हम जो भी चीज़ रखेंगे जैसे image, text या box वह बहुत ज्यादा होना चाहिए तभी background attachment काम करेगा.

9) Gradient background css3

css ने gradient का इस्तेमाल हम किसी box में 2 या 2 से अधिक color को mix करने के लिए करते है और css में हम 4 प्रकार के gradient का इस्तेमाल करते है.

  1. Linear Gradient

  2. Radial Gradient

  3. Repeating Linear Gradient

  4. Repeating Radial Gradient

1) Linear Gradient

linear gradient में हम 2 या 2 से अधिक color को mix करते है तथा color को top से bottom, left से right तथा किसी भी angel में set कर सकते है. top से bottom set करने के लिए to bottom तथा left से right set करने के लिए to right तथा 90 degree में set करने के लिए 90deg का इस्तेमाल करते है इस तरह से आप किसी भी direction में set कर सकते है.

इसमें से आप किसी एक background gradient का उपयोग कर सकते है हम color को rgb, rgba और hex value में भी दे सकते है.

2) Radial Gradient

इसमें भी हम 2 या 2 से अधिक color को mix कर सकते है radial gradient हमेशा किसी box के center से शुरू होता है तथा बाहर की तरफ फैलता है radial gradient गोल आकर में होता है इसमें हम color को % (percentage) में देते है तथा हम color को अलग अलग 4 sizes में देते है.

  1. Closest-side
  2. Farthest-side
  3. Closest-corner
  4. Farthest-corner

ऊपर दिए गए css code में से आप किसी एक radial gradient का इस्तेमाल कर सकते है तथा अपने हिसाब से % और color दे सकते है.

3) Repeating Linear Gradient

इसमें भी 2 से अधिक color को mix कर सकते है जितने भी color हम box के अंदर देते है उसके खत्म हो जाने के बाद same color repeat होते रहते है जिसे repeating linear gradient कहते है तथा color को हम percentage या degree में दे सकते है.

4) Repeating Radial Gradient
Repeating Linear Gradient की तरह ही हम Repeating Radial Gradient का इस्तेमाल करते है box के अंदर हम जितने भी color देते है उसके खत्म हो जाने के बाद color circle के रूप में repeat होते रहता है इसमें भी color को %(percentage) में देते है.

10) Rotate background image css हिंदी में

अपनी website में हम किसी भी image या box को rotate यानि की घुमा सकते है या अपने स्थान से ऊपर, नीचे, दाए या बाए रख सकते है box को rotate करने के लिए हम rotate के साथ deg(degree) को देते है. अगर image को ऊपर नीचे ले जाना है तो translateY के साथ उसकी value px में देते है तथा दाए बाए ले जाने के लिए translateX के साथ value को px में देते है.

अगर हम skewX करते है तो left तथा right side से stretch हो जाता है यानि की खिंच जाता है अगर skewY करते है तो ऊपर तथा नीचे side से box stretch हो जाता है.

ScaleX रखने पर box एक scale के आकार में left से right side में फैलता है अगर ScaleY करें तो ऊपर से नीचे scale के आकार में फैलता है और इसे हम digit में लिखते है जैसे – 1 या 1.5 हम color, image, gradient, animation आदि चीज़ो को rotate कर सकते है.

और भी अधिक जानकारी के लिए आप CSS background से पढ़ सकते है जहा पर trial के साथ आप background property के बारे में बताया गया है.

CSS background property और css background color, image, rotate, gradient, position, size और opacity आदि चीज़ो के बारे में बताया गया है अगर आपको कोई चीज़ समझने में परेशानी हो आप नीचे comment box में अपने सवाल पूछ सकते है.

jeewan.basera@gmail.comhttps://hindischool.net
Jeewan, मै hindischool.net का foundur हूँ मै एक professional web designer और graphic designer हूँ मुझे इस क्षेत्र में 4 साल का अनुभव है और यहाँ में अपने अनुभव को blog के जरिये लोगों के साथ शेयर करता हूँ मुझे हिंदी मै blog लिखना पसंद है, graphic और website से संबंधित किसी भी प्रकार की सहायता के लिए आप social media या comment के जरिए अपने सवाल पूछ सकते है.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Stay Connected

21,570FansLike
3,432FollowersFollow
0SubscribersSubscribe

Latest Articles