Website पर Full Screen Background Image कैसे लगायें?

Web design में full screen background image use करने का trend काफी popular है| आपने कई सारी companies और products की websites के home page में large background image का उपयोग करते हुए देखा होगा जो की पूरे browser window को cover कर लेता है और काफी attractive दिखाई देता है|

अगर आप भी अपने वेबसाइट पर इस तरह की background image use करना चाहते हैं तो आज हम आपको इस article में एक आसान तरीका बताएँगे जिससे आप CSS का उपयोग करके यह काम बड़ी आसानी से कर सकते हैं और इसकी खास बात यह responsive भी है यानि की लगभग सभी devices पर यह काम करता है|

Examples of Full Screen Background Images

चलिए सबसे पहले हम कुछ ऐसे websites का example देखते हैं जो की full screen image का उपयोग करते हैं| इन examples को देखने के बाद आपको भी कुछ inspiration मिलेगा और समझ भी आयेगा की किस तरह के images use कर सकते हैं|

CSS Code से Full Screen Background कैसे लगायें?

जब हमें पूरे screen पर background डालना होता है तब हमें html tag या body tag पर CSS की background property apply किया जाता है|

इस example में हमने CSS code से body tag पर background image apply किया है| इसका code आप नीचे देख सकते हैं|

body {
  background: url(background.jpg) no-repeat center center fixed;
  background-size: cover;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 }

चलिए अब इस code को समझने की कोशिश करते हैं:

background shorthand property
सबसे पहले हमने background की shorthand property का use करते हैं जिसमे नीचे दिए गये कुछ values add करने हैं:

• url(‘image_name.jpg’) – background image का path
• no-repeat – हमें ये ध्यान रखना है की image repeat न हो इसके लिए no-repeat लिखना होगा
• center center – इसकी जगह हम 50% 50% भी use कर सकते हैं जिससे image horizontal और vertical दोनों तरफ से center पर आ जाये|
• fixed – इससे image background में fixed हो जाएगी और page scroll करने पर भी अपनी जगह पर बनी रहेगी|

background-size property
यह सबसे important है इस property की value cover रहेगी जिससे की यह पूरे browser screen की width और height को cover कर लेगा|

Old browsers के लिए code
कुछ पुराने version के browsers में background-size property सही तरह से काम नही करती है तो उनके लिए कुछ browser specific codes add करने होंगे:

• -webkit-background-size – Safari और Chrome browser के लिए
• -moz-background-size – Firefox के लिए
• -o-background-size – Opera के लिए

इसका एक live example आप नीचे देख सकते हैं|

Large Image Select करते समय इन बातों का रखें ध्यान

वेबसाइट के background पर full screen image लगाते समय आपको कई सारी बातों का ध्यान रखना पड़ेगा| आपको यह ध्यान रखना होगा की image की quality high हो लेकिन आपको यह भी देखना होगा की website की loading speed पर उसका गलत प्रभाव न पड़े|

Background image लगाते समय नीचे दिए गये कुछ points पर जरूर ध्यान दें:

• Small size के image का use न करें क्योंकि यह पूरे screen को cover करने के लिए expand होगी जिससे की large screen वाले device पर इसका resolution कम हो जायेगा और quality कम हो जाएगी|
• Image की size को 1920px के आसपास रखें|
• Image को optimize करने के लिए उसे compress कर सकते हैं लेकिन quality का भी ध्यान रखें|
• आप large image की जगह कोई ऐसा small size का image use कर सकते हैं जिसे आसानी से repeat करके पूरे screen को cover किया जा सके| इसका एक फायदा यह भी है की ये जल्दी load हो जाते हैं जिससे website speed प्रभावित नही होती| आप Google पर repeatable background image search कर सकते हैं|
• सही image format का उपयोग करें| यदि graphics multiple color वाली हो तो JPG और यदि solid color वाली हो तो PNG format का use करें|
• Color combination का जरूर ध्यान रखें, website के contents background image के ऊपर रहेंगे ऐसे में contents के color को इस प्रकार रखें की वह साफ़-साफ़ दिखाई दे|

इस tutorial को पढने के बाद अब आप आसानी से अपनी website पर responsive full screen background image लगा पाएंगे| आप इस background के ऊपर किसी भी प्रकार के content जैसे heading, paragraph, navigation, form आदि जो कुछ भी चाहें लगा सकते हैं|

आपको यह article कैसा लगा जरूर बताएं|