वेबसाइटवर प्रतिसाद पार्श्वभूमी प्रतिमा कसे जोडावे

CSS वापरून प्रतिसाद डिझाइन प्रतिमा कशी जोडावी ते येथे आहे

आजच्या लोकप्रिय वेबसाइट पहा आणि एक डिझाइन उपचार ज्या आपल्याला बघायला मिळेल याची खात्री मोठी आहे, पार्श्वभूमीच्या प्रतिमांची चित्रे काढता येतील. या प्रतिमांना जोडण्याशी संबंधित आव्हानेंपैकी एक उत्तम पद्धती आहे जी वेबसाइटना विविध स्क्रीन आकार आणि डिव्हाइसेसवर प्रतिसाद देणे आवश्यक आहे - प्रतिसाद वेब डिझाइन म्हणून ओळखले जाणारे एक मार्ग

आपल्या वेबसाइटचे लेआउट बदलते आणि भिन्न स्क्रीन आकारांसह व्याप्ती असल्यामुळे, या पार्श्वभूमीच्या छायाचित्रे त्यानुसार त्यांच्या आकाराचे मोजमाप करणे आवश्यक आहे.

खरं तर, या "द्रव प्रतिमा" ही उत्तरदायी संकेतस्थळांमधील एक घटक आहेत (द्रवपदार्थ ग्रिड आणि मिडीयाच्या क्वेरींसह). सुरुवातीपासूनच हे तीन तुकडे प्रतिसाद वेब डिझाईनचे एक मुख्य भाग झाले आहेत, परंतु साइटवर प्रतिसाद इनलाइन प्रतिमा नेहमी जोडणे सोपे (नेहमी इनलाइन प्रतिमा म्हणजे एचटीएमएल मार्कअपच्या भाग म्हणून ओळखली जाणारी ग्राफिक्स) आहेत. त्याचप्रमाणे बॅकग्राऊंड प्रतिमा (जे सीएसएस बॅकग्राऊंड प्रॉपर्टीजचा वापर करून पेजवर स्टाईल आहे) ने अनेक वेब डिझायनर्स आणि फ्रंट एंड डेव्हलपरला एक महत्त्वपूर्ण आव्हान दिले आहे. कृतज्ञतापूर्वक, CSS मधील "पार्श्वभूमी-आकार" मालमत्तेच्या समावेशामुळे हे शक्य झाले आहे.

एका स्वतंत्र लेखात, मी एका विंडोमध्ये बसविण्यासाठी प्रतिमा विस्तारित करण्यासाठी CSS3 प्रॉपर्टी पार्श्वभूमी-आकार कसे वापरावे हे कव्हर केले आहे, परंतु या मालमत्तेसाठी तैनात करण्यासाठी एक अधिक चांगली आणि अधिक उपयुक्त पद्धत आहे. हे करण्यासाठी, आम्ही खालील मालमत्ता आणि मूल्य संयोजन वापरेल:

पार्श्वभूमी-आकार: कव्हर;

कव्हर कव्हरेज गुणधर्म ब्राउझरला विंडोमध्ये फिट करण्यासाठी आकार मोजण्यासाठी सांगते, पर्वा विंडो किती मोठी किंवा लहान आहे याची पर्वा न करता. प्रतिमा संपूर्ण स्क्रीनवर आणण्यासाठी आकारलेली आहे, परंतु मूळ परिमाण आणि पक्ष अनुपात अखंड ठेवलेले आहेत, प्रतिमा स्वतः विकृत करण्यापासून प्रतिबंधित करते.

संपूर्ण विंडोच्या पृष्ठभागावर कव्हर झाले आहे म्हणून प्रतिमा विंडोच्या रूपात मोठी ठेवली आहे. याचा अर्थ आपणास आपल्या पृष्ठावरील कोणत्याही रिक्त स्पॉट किंवा प्रतिमेवरील कोणत्याही विकृती असणार नाही, परंतु याचा अर्थ असा की काही प्रतिमेचा स्क्रीनच्या आशाप भागावर आणि प्रश्नातील प्रतिमेच्या आधारावर कट केला जाऊ शकतो उदाहरणार्थ, बॅकग्राउंड-पॉझिटी गुणधर्मांकरिता आपण कोणत्या मूल्यांचा वापर करता यानुसार, एखाद्या प्रतिमेच्या कडा (एकतर शीर्ष, तळाशी, डावीकडे किंवा उजवीकडे) काटल्या जाऊ शकतात. आपण पार्श्वभूमी "शीर्षस्थानी डावीकडे" वर दिल्यास, प्रतिमेवरील कोणतेही अतिरिक्त भाग खालच्या आणि उजव्या बाजूच्या दिशेने येईल आपण पार्श्वभूमी प्रतिमा केंद्रात असल्यास, सर्व बाजूंना अधिक मिळेल, परंतु त्यापेक्षा जास्त वाढ झाल्यानंतर कोणत्याही एका बाजूवर परिणाम कमीत कमी सेवा मिळेल.

पार्श्वभूमी-आकार कसा वापरावा: कव्हर;

आपली पार्श्वभूमी प्रतिमा तयार करताना, ती एक प्रतिमा तयार करणे एक चांगली कल्पना आहे जी फार मोठी आहे जेव्हा ब्राऊझर व्हिज्युअल गुणवत्तेवर लक्षणीय परिणाम न करता लहान प्रतिमा बनवू शकतात, तेव्हा जेव्हा एखादा ब्राऊजर तिच्या मूळ आकारमानापेक्षा आकारात मोठ्या आकारात प्रतिमा स्केल करतो, तेव्हा व्हिज्युअल गुणवत्ता खराब होईल, ब्लररी आणि पिक्सेलटेड बनतील. या नकारात्मक गोष्टी म्हणजे जेव्हा आपण सर्व स्क्रीनवर राक्षस प्रतिमा वितरीत करीत असाल तेव्हा आपल्या पृष्ठावर कामगिरी हिट होईल.

आपण हे करता तेव्हा, डाउनलोड स्पीड आणि वेब वितरण यासाठी त्या प्रतिमा योग्यरित्या तयार करण्याचे सुनिश्चित करा. सरतेशेवटी, मोठ्या आकाराची प्रतिमा आकार आणि गुणवत्तेच्या दरम्यान आनंदी माध्यमाचे आणि डाउनलोड स्पीडकरिता उचित फाइल आकार शोधण्याची आवश्यकता आहे.

स्केलिंग पार्श्वभूमी प्रतिमा वापरण्याची एक सामान्य पद्धत म्हणजे जेव्हा आपण ती प्रतिमा एका पृष्ठाची संपूर्ण पार्श्वभूमी घेऊ इच्छित असाल, हे पृष्ठ खूप रुंद असेल आणि डेस्कटॉप संगणकावर पाहिले असेल किंवा खूप लहान असेल आणि एका हातांमध्ये, मोबाईलवर पाठवले जात असेल डिव्हाइसेस

आपल्या वेब होस्टवर आपली प्रतिमा अपलोड करा आणि ती आपल्या सीएसएसमध्ये पार्श्वभूमी प्रतिमा म्हणून जोडाः

पार्श्वभूमी-प्रतिमा: url (फटाके-ओव्हर-डब्ल्यूडब्ल्यू.जेपीजी);
पार्श्वभूमी-पुनरावृत्ती: नाही-पुनरावृत्ती;
पार्श्वभूमी-स्थान: केंद्र केंद्र;
पार्श्वभूमी-संलग्नक: निश्चित;

प्रथम ब्राउझर प्रीफिक्स केलेला सीएसएस जोडा:

-वेबकिट-पार्श्वभूमी-आकार: कव्हर;
-moz-background-size: cover;
-ओ-बॅकग्राउंड-आकार: कव्हर;

नंतर सीएसएस गुणधर्म जोडा:

पार्श्वभूमी-आकार: कव्हर;

वेगवेगळी प्रतिमा वापरणे

एक डेस्कटॉप किंवा लॅपटॉप अनुभवसाठी प्रतिसाद डिझाइन महत्वाचे असताना, वेबवर प्रवेश करू शकणारे विविध डिव्हाइसेस लक्षणीयरीत्या वाढले आहेत आणि स्क्रीनचा आकार मोठ्या प्रमाणात वाढत आहे

पूर्वी नमूद केल्याप्रमाणे, उदाहरणार्थ, स्मार्टफोनवरील मोठ्या प्रतिसाद पार्श्वभूमी प्रतिमा लोड करणे हे एक कार्यक्षम किंवा बॅन्डविड्थ-जाणीव नसलेले डिझाइन नाही.

आपण आपल्या मोबाईल डिव्हाइसेससह आपल्या वेबसाइटची सुसंगतता सुधारित करणार्या डिव्हाइसेससाठी योग्य असलेल्या प्रतिमा देण्यासाठी आपण मीडिया क्वेरी कशा वापरु शकता ते जाणून घ्या.

जेनिफियर क्रिनिन यांचे मूळ लेख. जेरेमी गिरर्ड द्वारा संपादित 9/12/17