Setting backgrounds with CSS in Hindi -
ऊपर दिए गए उदाहरण में paragraph का background color CSS के द्वारा change किया गया है। इसी प्रकार दूसरे HTML elements का background color भी आप change कर सकते है। आइये अब CSS के द्वारा background में image set करना सीखते है।
Background image repeat करने के अलावा आप चाहे तो image को background में किसी certain position पर set कर सकते है। उदाहरण के लिए आप image को left से 50px छोड़कर set करना चाहते है तो ऐसा करना possible है। ऐसा background-position property के द्वारा किया जाता है। में आपको बता दू की इस property को आप background-image property के साथ यूज़ करते है।
Background position property की आप 2 values दे सकते है। पहली value left side से image की दुरी define करती है। और दूसरी value top से image की दुरी define करती है। आइये इसे एक उदाहरण से समझने का प्रयास करते है।
CSS file
HTML file
एक और property CSS के द्वारा provide की गई है जिसे आप background images के साथ यूज़ कर सकते है। इस property के द्वारा आप background image को fixed या scroll-able बना सकते है। ये property background-attachment है। इस property की fixed और scroll 2 values हो सकती है। Fixed value से image fixed रहती है उसे scroll नहीं किया जा सकता है। और scroll value से image को scroll-able बनाया जा सकता है। इसका उदाहरण निचे दिया जा रहा है।
CSS file
HTML file
Setting backgrounds with CSS (color & Image)
- Introduction to CSS background properties in Hindi
- Setting background color with CSS in Hindi
- Setting background image with CSS in Hindi
Introduction to CSS background properties
CSS के द्वारा किसी भी HTML element का background set किया जा सकता है। उदाहरण के लिए आप headings को highlight करना चाहते है ऐसी situation में आप CSS के द्वारा सभी headings का background set कर सकते है।
Background 2 तरह से set किया जा सकता है। आप चाहे तो background में कोई solid color set कर सकते है या फिर कोई image भी set कर सकते है। Background को set करने के लिए CSS आपको बहुत सी properties provide करती है। आइये इनके बारे में जानने का प्रयास करते है।
Setting background color
CSS के द्वारा background color set करने के लिए आप background-color property यूज़ करते है। इस property की value आप color का नाम या hex code दे सकते है। आइये इसे एक उदाहरण से समझते है।
ऊपर दिए गए उदाहरण में paragraph का background color CSS के द्वारा change किया गया है। इसी प्रकार दूसरे HTML elements का background color भी आप change कर सकते है। आइये अब CSS के द्वारा background में image set करना सीखते है।
Setting image background
CSS के द्वारा image को background के रूप में set किया जा सकता है। इसके लिए background-image property यूज़ की जाती है। इस property की value के रूप में image का url दिया जाता है। इसका उदाहरण निचे दिया जा रहा है।
कई बार ऐसा हो सकता है की आपकी image बहुत छोटी हो और उससे पूरा background fill नहीं हो रहा हो। ऐसी situation में आप background-image property के बाद background-repeat property यूज़ कर सकते है। इस property की repeat और no-repeat 2 values होती है। जब आप repeat value define करते है तो आपकी image repeat हो जाती है और pure background को fill कर देती है। आइये इसे एक उदाहरण से समझने का प्रयास करते है।Background image repeat करने के अलावा आप चाहे तो image को background में किसी certain position पर set कर सकते है। उदाहरण के लिए आप image को left से 50px छोड़कर set करना चाहते है तो ऐसा करना possible है। ऐसा background-position property के द्वारा किया जाता है। में आपको बता दू की इस property को आप background-image property के साथ यूज़ करते है।
Background position property की आप 2 values दे सकते है। पहली value left side से image की दुरी define करती है। और दूसरी value top से image की दुरी define करती है। आइये इसे एक उदाहरण से समझने का प्रयास करते है।
CSS file
HTML file
एक और property CSS के द्वारा provide की गई है जिसे आप background images के साथ यूज़ कर सकते है। इस property के द्वारा आप background image को fixed या scroll-able बना सकते है। ये property background-attachment है। इस property की fixed और scroll 2 values हो सकती है। Fixed value से image fixed रहती है उसे scroll नहीं किया जा सकता है। और scroll value से image को scroll-able बनाया जा सकता है। इसका उदाहरण निचे दिया जा रहा है।
CSS file
HTML file
No comments:
Post a Comment