एक वेब पृष्ठ फिट करण्यासाठी एक पार्श्वभूमी प्रतिमा पसरवण्यासाठी कसे

पार्श्वभूमी ग्राफिक्ससह आपल्या वेबसाइटचे दृश्यमान व्यास द्या

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

आपण पार्श्वभूमी प्रतिमांबरोबर काम करणे सुरु केल्यास, आपण निःसंशयपणे अशा पानात पुढे जाऊ शकता जिथे आपण पृष्ठ फिट करण्यासाठी एक प्रतिमा काढू इच्छित आहात

हे विशेषत: प्रतिसाद वेबसाइट्ससाठी खरे आहे जे मोठ्या प्रमाणात डिव्हाइसेस आणि स्क्रीन आकारांकडे वितरित होत आहेत.

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

पृष्ठाची पार्श्वभूमी फिट करण्यासाठी प्रतिमा ताणण्याचा सर्वोत्तम मार्ग म्हणजे, पार्श्वभूमी-आकारासाठी CSS3 मालमत्तेचा वापर करणे. येथे एक उदाहरण आहे जे एका पृष्ठाच्या मुख्य भागासाठी बॅकग्राऊंड प्रतिमा वापरते आणि जे 100% इतके आकार निश्चित करते जेणेकरून ते नेहमी स्क्रीनवर फिट होण्यास भाग पाडेल.

शरीर {
पार्श्वभूमी: url (bgimage.jpg) नो-पुनरावृत्ती;
पार्श्वभूमी-आकार: 100%;
}

Caniuse.com नुसार, हे ठिकाण IE 9+, फायरफॉक्स 4+, ऑपेरा 10.5+, सफारी 5+, क्रोम 10.5+, आणि सर्व प्रमुख मोबाइल ब्राउझरवर काम करते. हे आज उपलब्ध सर्व आधुनिक ब्राउझरसाठी व्यापते, ज्याचा अर्थ आपण या मालमत्तेचा वापर कोणत्याही व्यक्तीच्या स्क्रीनवर कार्य करणार नाही या भीतीने करू नये.

जुन्या ब्राऊजरमधे एक ताणलेली पार्श्वभूमी

IE9 पेक्षा जुन्या कोणत्याही ब्राऊजरला समर्थन देण्याची आवश्यकता असण्याची शक्यता फारच कमी आहे, परंतु आपण असे समजूया की IE8 या मालमत्तेचे समर्थन करत नाही. त्या वेळी, आपण बनावट एक विस्तारित पार्श्वभूमी शकता आणि आपण Firefox 3.6 (-मोझ-बॅकग्राऊंड-आकार) आणि ऑपेरा 10.0 (-ओ-बॅकग्राउंड-आकार) साठी ब्राउजर प्रिफिक्सेस वापरु शकता.

नकली एक विस्तृत पार्श्वभूमी प्रतिमा सर्वात सोपा मार्ग संपूर्ण पृष्ठ ओलांडून आहे मग आपण अतिरिक्त स्पेस देत नाही किंवा आपला मजकूर ताणलेल्या क्षेत्रात फिट होत आहे याची काळजी करण्याची गरज नाही. हे कसे करायचे ते येथे आहे:

आयडी = "बीजी" />

1. प्रथम, सर्व ब्राउझरकडे आणि HTML BODY घटकांवरील 100% उंची, 0 मार्जिन आणि 0 पॅडिंग असल्याचे सुनिश्चित करा. आपल्या HTML दस्तऐवजाच्या शीर्षस्थानी खालील ठेवा:

2. आपण वेब पृष्ठाचा पहिला घटक म्हणून पार्श्वभूमी बनवू इच्छित असलेली प्रतिमा जोडा आणि त्याला "bg" चा id द्या:

3. पार्श्वभूमी प्रतिमेचे स्थान निवडा जेणेकरून ते वरच्या आणि डाव्या बाजूस निश्चित होईल आणि 100% रूंद असेल आणि 100% उंचीचे असेल. आपल्या शैली शीटमध्ये हे जोडा:

   img # bg {
   स्थिती: निश्चित;
   शीर्ष: 0;
   डावी: 0;
   रुंदीः 100%;
   उंची: 100%;
   }

4. "सामग्री" चे id असलेल्या एका DIV घटकाच्या पृष्ठामध्ये आपली सर्व सामग्री पृष्ठामध्ये जोडा प्रतिमेखाली DIV जोडा:

   येथे आपली सर्व सामग्री - शीर्षलेख, परिच्छेद इ.

   टीप: आता आपल्या पृष्ठावर पाहणे मनोरंजक आहे. प्रतिमा विस्तृत केली पाहिजे, परंतु आपली सामग्री पूर्णपणे गहाळ आहे. का? कारण बॅकग्राउंड प्रतिमा 100% उंची आहे, आणि सामग्री विभागात फाईल नंतर दस्तऐवजाच्या प्रवाहात असते - बहुतेक ब्राउझर ते प्रदर्शित करणार नाहीत.
   
5. आपली सामग्री स्थानबद्ध करा जेणेकरून ती रिलेटिव्ह असेल आणि झिंक इंडेक्स 1 असेल. हे हे पार्श्वभूमी प्रतिमेपेक्षा उच्च दर्जाच्या अनुरूप ब्राउझरमध्ये आणेल. आपल्या शैली शीटमध्ये हे जोडा:

   #content {
   स्थान: सापेक्ष;
   z- सूची: 1;
   }

1. परंतु आपण पूर्ण केले नाही. इंटरनेट एक्स्प्लोरर 6 हे सुसंगत नाही आणि तरीही त्यात काही समस्या आहेत. प्रत्येक ब्राऊझरमधून सीएसएस लपवायला अनेक मार्ग आहेत पण आय.आय. 6 पण सर्वात सोपा (आणि कमीतकमी इतर समस्या उद्भवू शकतात) सशर्त टिप्पण्या वापरणे आहे आपल्या दस्तऐवजाच्या शीर्षस्थानी आपल्या शैलीपत्रकावर खालील ठेवा:

2. हायलाइट केलेली टिप्पणीमध्ये, IE 6 ला छान खेळायला मिळण्यासाठी काही शैलीसह आणखी एक शैली पत्रक जोडा:

3. IE 7 आणि IE 8 मध्ये देखील चाचणीची खात्री करा. आपल्याला त्यांना समर्थन देण्यासाठी टिप्पण्या समायोजित करण्याची आवश्यकता असू शकते तथापि, जेव्हा मी त्याची चाचणी केली तेव्हा हे काम केले.

ओके - हे कबूल आहे WAY ओव्हरकिल खूप काही साइट्स आता आय 7 किंवा 8 समर्थन करणे आवश्यक आहे, कमी आय आय 6!

म्हणूनच, हा दृष्टिकोन जुना आणि आपल्यासाठी कदाचित अनावश्यक आहे. मी हे सर्व जिज्ञासेवाचे एक मॉडेल म्हणून सोडून देते कारण आमच्या सर्व ब्राउझर इतक्या छानपणे एकत्रितपणे खेळण्याआधी किती कठीण गोष्टी होत्या!

एका लहान जागेवर एक ताणलेली पार्श्वभूमी प्रतिमा बनविणे

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

1. अशा पृष्ठावर प्रतिमा ठेवा ज्याला मी पार्श्वभूमी म्हणून वापरू इच्छितो.

2. शैली शीटमध्ये, प्रतिमेसाठी रूंदी आणि उंची सेट करा. लक्षात घ्या, आपण रुंदी किंवा उंचीसाठी टक्केवारी वापरू शकता, परंतु मला उंचीसाठी लांबीच्या मूल्यांशी जुळविणे सोपे वाटते.

   img # bg {
   रुंदी: 20 अं.
   उंची: 30 अंश;
   }

3. वरीलप्रमाणे आपण "सामग्री" असलेल्या आयडीसह आपल्या सामुग्रीस डिवाईसमध्ये ठेवा:

   येथे आपली सर्व सामग्री

4. पार्श्वभूमी प्रतिमा म्हणून सामग्री डिवाई समान रूंदी आणि उंचीची शैली करा:

   div # content {
   रुंदी: 20 अं.
   उंची: 30 अंश;
   }

5. नंतर सामग्रीची समान उंचीपर्यंत प्रतिमा म्हणून ठेवा. म्हणून जर आपली प्रतिमा 30 ए असेल तर आपल्याकडे वरची शैली असेल: -30 एफएम; सामग्रीवर 1 ची झ-सूची ठेवणे विसरू नका.

   #content {
   स्थान: सापेक्ष;
   शीर्ष: -30म;
   z- सूची: 1;
   रुंदी: 20 अं.
   उंची: 30 अंश;
   }

6. मग आपण IE 6 वापरकर्त्यांसाठी -1 मधील z- सूचीत जोडा, जसे आपण वरील केले आहे:

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

आणि जर आपली सामग्री आकार बदलली तर, आपल्याला आपल्या कंटेनरचा आकार आणि पार्श्वभूमी प्रतिमा बदलण्याची आवश्यकता असेल, अन्यथा, आपण अनोखी परिणामांसह समाप्त व्हाल.