एचटीएमएल और सीएसएस में एक तस्वीर पृष्ठभूमि कैसे बनाएं। 3 सरल तरीके

पैलेट से पीछे की योजना का रंग सेट करता है। वारिस का रंग हमेशा पूर्वज तत्व के रंग के साथ मेल खाता है।
अभिवादन। इस लेख में, मैं केवल एचटीएमएल + सीएसएस (जेएस का उपयोग किए बिना) का उपयोग करके पूरे पृष्ठ की पृष्ठभूमि के रूप में एक छवि को रखने के तीन तरीकों को बताना चाहता हूं।

अभिवादन। इस लेख में, मैं केवल एचटीएमएल + सीएसएस (जेएस का उपयोग किए बिना) का उपयोग करके पूरे पृष्ठ की पृष्ठभूमि के रूप में एक छवि को रखने के तीन तरीकों को बताना चाहता हूं।

तो, पृष्ठभूमि छवि के लिए आवश्यकताओं हम निम्नानुसार हैं:

  • 100% चौड़ाई और पेज ऊंचाई कवर
  • यदि आवश्यक हो तो पृष्ठभूमि तराजू (पृष्ठभूमि को स्क्रीन के आकार के आधार पर विस्तारित या संपीड़ित किया जाता है)
  • चित्रों के अनुपात को पेस्ट करें (पहलू अनुपात)
  • छवि पृष्ठ पर केंद्रित है
  • पृष्ठभूमि स्क्रॉल का कारण नहीं बनती
  • समाधान अधिकतम क्रॉसबॉसर है
  • सीएसएस को छोड़कर कोई अन्य प्रौद्योगिकियों का उपयोग नहीं किया जाता है

पैलेट से पीछे की योजना का रंग सेट करता है। वारिस का रंग हमेशा पूर्वज तत्व के रंग के साथ मेल खाता है।

विधि 1

मेरी राय में, यह सबसे अच्छा तरीका है, क्योंकि यह सबसे आसान, संक्षिप्त और आधुनिक है। यह CSS3 संपत्ति का उपयोग करता है पृष्ठभूमि आकार। जिसे हम टैग पर लागू करते हैं एचटीएमएल। । बिल्कुल सही एचटीएमएल। , लेकिन नहीं तन। चूंकि इसकी ऊंचाई ब्राउज़र विंडो की ऊंचाई से अधिक या बराबर है।

एक निश्चित और केंद्रित पृष्ठभूमि स्थापित करें, फिर इसका उपयोग करके अपने आकार को समायोजित करें पृष्ठभूमि आकार: कवर .

एचटीएमएल { 

पृष्ठभूमि-छवि: यूआरएल (छवियों / पृष्ठभूमि.जेपीजी);

पृष्ठभूमि-दोहराना: नो-रिपीट;

पृष्ठभूमि-स्थिति: केंद्र केंद्र;

पृष्ठभूमि-अनुलग्नक: निश्चित;

-वेबिट-पृष्ठभूमि आकार: कवर;

-मोज-पृष्ठभूमि आकार: कवर;

-ओ-पृष्ठभूमि आकार: कवर;

पृष्ठभूमि आकार: कवर; 
} 

डेमो

यह विधि में काम करता है

  • क्रोम (कोई भी संस्करण)
  • ओपेरा 10+।

फ़ायरफ़ॉक्स 3.6+

सफारी 3+।

यानी 9+

छवियों को जल्दी से लोड करने के लिए, अपनी साइट को केवल साबित होस्टिंग प्रदाताओं से रखें, उदाहरण के लिए, Beget.com 
उपयोगकर्ता और खोज इंजन त्वरित साइटों से प्यार करते हैं। 

पृष्ठभूमि-छवि: यूआरएल (छवियों / पृष्ठभूमि.जेपीजी);

विधि 2

यह विधि आईएमजी तत्व के उपयोग के लिए प्रदान करती है, जिसका आकार ब्राउज़र विंडो के आकार के आधार पर अलग-अलग होगा। छवि को पूर्ण स्क्रीन पर खींचने के लिए, इसे 100% के मूल्य के साथ न्यूनतम ऊंचाई और चौड़ाई सेट करने की आवश्यकता है। और ताकि छवि मूल से छोटे आकार तक संपीड़ित न हो, तस्वीर की समान चौड़ाई के मूल्य के साथ न्यूनतम चौड़ाई स्थापित करें।

यदि खिड़की की चौड़ाई छवि की चौड़ाई से कम है, तो मीडिया क्वेरी का उपयोग केंद्र में पृष्ठभूमि को संरेखित करने के लिए किया जाएगा।

विरासत में।

<img src = "/ छवियों / पृष्ठभूमि। jpg" वर्ग = "पृष्ठभूमि" />

img.background { न्यूनतम ऊंचाई: 100%; न्यूनतम चौड़ाई: 640 पीएक्स; चौड़ाई: 100%; ऊंचाई: ऑटो;

स्थिति: फिक्स्ड; शीर्ष: 0; बाएं: 0;

/ * छवि के आकार पर निर्भर करता है * /

@Media स्क्रीन और (अधिकतम चौड़ाई: 640px) { img.bg { и बाएं: 50%; मार्जिन-बाएं: -320px; } } } डेमो

अभिभावक तत्व की सभी विशेषताओं को विरासत में मिला

यह विधि इसमें काम करती है:

अच्छे ब्राउज़रों के किसी भी संस्करण (क्रोम, ओपेरा, फ़ायरफ़ॉक्स, सफारी) यानी 9+ и विधि 3। . एक और तरीका निम्नानुसार है: पृष्ठ के ऊपरी बाएं कोने में छवि <img /> को ठीक करें और पहलू अनुपात को बनाए रखते हुए, 100% की न्यूनतम चौड़ाई और न्यूनतम ऊंचाई गुणों का उपयोग करके इसे फैलाएं। सच है, इस दृष्टिकोण के साथ, तस्वीर केंद्रित नहीं है। लेकिन इस समस्या को <div /> में चित्र लपेटकर हल किया जाता है, जिसे हम खिड़की के आकार को 2 गुना बनाते हैं। और छवि स्वयं ही हम खिंचाव और केंद्र में डाल दिया। <div class = "पृष्ठभूमि"> <img src = "/ छवियों / पृष्ठभूमि। jpg" />

</ div> Div.background { <div class = "पृष्ठभूमि"> स्थिति: फिक्स्ड;

शीर्ष: -50%;

बाएं: -50%; } चौड़ाई: 200%; ऊंचाई: 200%; }

img { स्थिति: पूर्ण; शीर्ष: 0;

बाएं: 0; सही: 0; :

नीचे: 0;

मार्जिन: ऑटो; न्यूनतम चौड़ाई: 50%; न्यूनतम ऊंचाई: 50%; } .

यह विधि अच्छे ब्राउज़रों और यानी 8+ में काम करती है।

मुझे उम्मीद है कि यह जानकारी आपके लिए उपयोगी होगी। व्यक्तिगत रूप से, मैं अक्सर इन तरीकों का उपयोग करता हूं, खासकर पहले। निश्चित रूप से सीएसएस के साथ पिछली पृष्ठभूमि पर एक छवि डालने के अन्य तरीके हैं। यदि आप उनके बारे में जानते हैं, तो साझा करें, कृपया टिप्पणियां। पृष्ठभूमि रंग सेट करें और / या किसी पृष्ठ या एक अलग आइटम के लिए एक तस्वीर पर्याप्त सरल है। मुख्य बात यह है कि यह जानना है कि इसे कहां और कैसे किया जा सकता है, साथ ही रंग कोड और / या पृष्ठभूमि चित्र भी होना चाहिए। यह संभव है कि इस लेख से आप कई नई चीजें सीखेंगे, लेकिन मैंने इसे विशेष रूप से शुरुआती लोगों के लिए बनाया है। इसलिए, सबकुछ जितना संभव हो सके और विस्तार से एक साथ होगा। मुख्य बात यह है कि आपको न केवल समग्र प्रस्तुति और तैयार किए गए उदाहरण प्राप्त होंगे, बल्कि यह भी समझेंगे कि HTML में पृष्ठभूमि कैसे बनाएं। HTML में पृष्ठभूमि सेट करने के लिए मध्यवर्ती सिद्धांत का उपयोग करें और मैं इस तथ्य से शुरू करूंगा कि एचटीएमएल 5। साइट के लिए पृष्ठभूमि सेट करने की कोई संभावना नहीं है। इस सुविधा का निर्णय सीएसएस में सहन करने का निर्णय लिया गया था। इसलिए, यदि आप नीचे उपयोग करने की योजना बना रहे हैं, और आप एक मान्य प्राप्त करना चाहते हैं » (सही बात) कोड, आपको दस्तावेज़ के संक्रमण प्रकार पर रहने की आवश्यकता है। ऐसा करने के लिए, आपका वेब पेज निम्न पंक्ति से शुरू होना चाहिए: <! डॉक्टाइप एचटीएमएल सार्वजनिक "- // डब्ल्यू 3 सी // डीटीडी एचटीएमएल 4.01 » संक्रमणकालीन // en "" http://www.w3.org/tr/html4/loose.dtd ">

व्यावहारिक वर्गों के लिए समय

वेब पेज पर पृष्ठभूमि कैसी है? (#)यदि आपने इसे समझ लिया है, तो आइए समझें कि पृष्ठभूमि कैसे बनाई गई है। और यहां पहली बात यह नोट की जानी चाहिए - यह बीच का अंतर है

पीछे का रंग

पृष्ठभूमि चित्र

। शुरुआत में जाता है

पीछे का रंग बाएं: 50%; जो सभी उपलब्ध पृष्ठ स्थान या उसके तत्व को बाढ़ करता है। इसके ऊपर दोहराया गया पृष्ठभूमि चित्र }

। दृष्टि से, इसे निम्नानुसार चित्रित किया जा सकता है: स्थिति: पूर्ण; शीर्ष: 0;

HTML दस्तावेज़ और उसके तत्वों की पृष्ठभूमि

पृष्ठभूमि नियंत्रण के मुख्य तत्वों को निराश करने के बाद, साथ ही साथ उनके गुण, सीधे एक विशिष्ट उदाहरण के विश्लेषण पर आगे बढ़ें। नीचे दिखाए गए प्रोग्राम कोड में, मैंने सभी वर्णित तत्वों को सक्षम करने की कोशिश की।

दूसरी बात जो आपको जानने की जरूरत है वह बीच का अंतर है

दस्तावेज़ का शरीर सही: 0; :

दस्तावेज़ का तत्व

दस्तावेज़ का शरीर

वेब पेज टैग के HTML कोड में इंगित किया गया

तन। जिसमें वेब पेज की सभी सामग्री शामिल है। जाहिर है, दस्तावेज़ के दस्तावेज़ की पृष्ठभूमि पारदर्शी नहीं हो सकती है। यदि दस्तावेज़ के शरीर की पृष्ठभूमि निर्दिष्ट नहीं है, तो ब्राउज़र सेटिंग्स में निर्दिष्ट डिफ़ॉल्ट मान का उपयोग किया जाता है। पृष्ठ तत्व टैग के अंदर हैं }

। यह उल्लेखनीय है कि आप दस्तावेज़ के सभी तत्वों को HTML का उपयोग करके रंग और / या पृष्ठभूमि चित्र सेट कर सकते हैं। उदाहरण के लिए, पृष्ठभूमि चित्र केवल तालिकाओं के लिए निर्दिष्ट किया जा सकता है। डिफ़ॉल्ट रूप से, उनके पास आमतौर पर एक पारदर्शी पृष्ठभूमि होती है। स्थिति: पूर्ण; शीर्ष: 0;

पृष्ठभूमि रंग बनाने के लिए bgcolor विशेषता

पूछने के लिए

दस्तावेज़ या उसके तत्वों का उपयोग किया जाता है ऊंचाई: 200%; и पृष्ठभूमि चित्र बीजीकोलर , उदाहरण: <बॉडी bgcolor = "# ec008c">

<! - दस्तावेज़ बॉडी ->

</ बॉडी>

इस मामले में, हम पृष्ठ के लिए पृष्ठभूमि रंग को पूरी तरह से सेट करते हैं। लेकिन टैग में तालिका के लिए पृष्ठभूमि रंग सेट करने का एक उदाहरण है टेबल <तालिका bgcolor = "# ec008c"> <tr> <td> पृष्ठभूमि के साथ पाठ </ td> </ tr> </ table>

यह उल्लेखनीय है कि तालिका में पृष्ठभूमि रंग भी टैग में पंक्तियों के लिए निर्दिष्ट किया जा सकता है

टीआर और टैग में उनकी कोशिकाओं के लिए टीडी।

रंग कोड कैसे पता लगाएं? आपने शायद पहले ही देखा होगा कि HTML में रंग विशेष पर सेट है कोड एचटीएमएल। , उदाहरण:

# Ec008c।

  • । कोड को खोजने के लिए आपको रंग की आवश्यकता है जिसे आप ग्राफिक्स संपादकों में से एक का उपयोग कर सकते हैं। उदाहरण के लिए, फ़ोटोशॉप में आप उपयोग कर सकते हैं "
  • आँख में द्रव डालने हेतु उपकरण।
  • (पिपेट)

तस्वीर में एक बिंदु से रंग प्राप्त करने के लिए। फिर, आपको टूलबार पर और विंडो में खुलने वाली विंडो में क्लिक करने की आवश्यकता है "

रंग चयनकर्ता। (रंग चयन) रंग कोड कॉपी करें। मैं इस तथ्य पर आपका ध्यान आकर्षित करता हूं कि यह कोड एक जाली के संकेत के बिना होगा शुरुआत में, इस संकेत को मैन्युअल रूप से जोड़ने की आवश्यकता होगी।

उदाहरण के लिए आप कई ऑनलाइन सेवाओं का भी उपयोग कर सकते हैं: 
उनके काम का सिद्धांत भी आसान है - वांछित रंग पर क्लिक करें और इसे कोड प्राप्त करें। पृष्ठभूमि छवि बनाने के लिए विशेषता पृष्ठभूमि साथ ही पृष्ठभूमि रंग के मामले में और के मामले में
आपको एक विशेष विशेषता, अर्थात् का उपयोग करने की आवश्यकता है 
पृष्ठभूमि। 
<शरीर पृष्ठभूमि = "/ 2014/06 / bg.jpg">

В एचटीएमएल। इस मामले में, हम पृष्ठभूमि चित्र को पूरी तरह से पूछते हैं। यह उल्लेखनीय है कि तस्वीर के आकार की सीमाओं के कारण, इसे दोहराया जाएगा, उदाहरण के लिए: जैसा कि आप देखते हैं, जब पुनरावृत्ति, चित्रों के बीच संक्रमण ध्यान देने योग्य है। इसलिए, विशेष चित्रों का अक्सर उपयोग किया जाता है, जहां इस पल को ध्यान में रखा जाता है। लेकिन टैग में तालिका के लिए पृष्ठभूमि चित्र सेट करने का एक उदाहरण

<तालिका पृष्ठभूमि = "/ 2014/06 / bg.jpg"> <tr> <td> पृष्ठभूमि के साथ पाठ </ td> </ tr> </ table> एचटीएमएल। यह उल्लेखनीय है कि पृष्ठभूमि चित्र केवल तालिका के लिए पूरी तरह से और / या इसके अलग सेल के रूप में सेट किया जा सकता है। एक स्ट्रिंग के लिए यह काम नहीं करेगा। पृष्ठभूमि छवि बनाने के लिए विशेषता पृष्ठभूमि .

पृष्ठभूमि चित्र के लिए पूर्ण और सापेक्ष पथ (रंग चयन) अलग से ध्यान देने लायक पता पृष्ठभूमि चित्र । इस मामले में, चित्र के सापेक्ष पथ का उपयोग किया जाता है, यानी। पता छवि फ़ाइल के स्थान पर वेब पेज फ़ाइल पर इंगित किया गया है। इस विकल्प को विशेष रूप से सफल नहीं कहा जा सकता है। तस्वीर के पूर्ण पथ का उपयोग करना सबसे अच्छा है, यानी

इसका पूरा यूआरएल <शरीर पृष्ठभूमि = "/ छवियों / bg.jpg"> .

इस मामले में, आपके पास संगत समस्याएं नहीं होंगी। इसके बारे में अधिक जानकारी के लिए आप यहां पढ़ सकते हैं।

चलो सारांश 
विशेषताओं का उपयोग करना नैतिक रूप से पुराना, क्योंकि एचटीएमएल कोड की वैधता के लिए आपको संक्रमणकालीन का उपयोग करना होगा सिद्धांत।

। HTML में पृष्ठभूमि रंग सेट करने के लिए, विशेष कोड का उपयोग करता है जिन्हें आप ग्राफिक संपादक में या विशेष ऑनलाइन सेवाओं का उपयोग कर सकते हैं। पृष्ठभूमि चित्र आवंटित क्षेत्र की पूंछ में डुप्लिकेट किया गया है और पृष्ठभूमि रंग के शीर्ष पर स्थित है। पृष्ठभूमि चित्र निर्दिष्ट करने के लिए, अपने पूर्ण यूआरएल का उपयोग करना बेहतर है। मेरे पास इस पर सब कुछ है। ध्यान के लिए धन्यवाद। सौभाग्य!

लघु लिंक: http://goo.gl/03tsnz साइट के लिए पृष्ठभूमि कैसे बनाएं? अगर कोई मंजिल प्रिय फारसी कालीन बढ़ता है तो कोई भी कमरा बहुत बेहतर लगेगा। तो आपकी साइट को बदतर? शायद यह समय और उसकी मंजिल है " सेट
  • »महंगा सुरुचिपूर्ण हस्तनिर्मित महल। हम साइट के लिए पृष्ठभूमि बनाने के तरीके के बारे में अधिक समझेंगे:
  • ऐसा होता है कि साइट का पुराना डिज़ाइन पहले ही आ गया है। और मैं कुछ नया और स्वादिष्ट चाहता हूं। और यदि आप इसे अपने हाथों से पकाएंगे तो नया डिजाइन ऐसा होगा।
  • लेकिन पूरी तरह से संसाधन के सभी डिजाइन को बदलने के लिए - बात कृतज्ञ है। हां, और हर किसी के पास इस बारे में कोई बात नहीं है। "
  • तेज

"हाथ। इसलिए, पुराने टेम्पलेट को रीफ्रेश करना, संसाधन या इसकी पृष्ठभूमि छवि की पृष्ठभूमि का रंग बदलना सबसे आसान है।

साइट पर पृष्ठभूमि को बदलने के कई तरीके हैं। यह अवसरों का उपयोग करता है। 
सीएसएस। या । लेकिन पृष्ठभूमि के साथ काम करने के कई गुणों में इन वेब प्रौद्योगिकियों में एक ही नाम और आवेदन की पद्धति है।
  • पृष्ठभूमि के रूप में, आप कई वस्तुओं का उपयोग कर सकते हैं: रंग; ;
  • पृष्ठभूमि चित्र;
  • पाठ्यचर्या छवि। हम उनमें से प्रत्येक के उपयोग से अधिक विस्तार से निपटेंगे। साइट के लिए पिछली पृष्ठभूमि का रंग सेट करने के लिए, संपत्ति का उपयोग किया जाता है।

पीछे का रंग।

शैली विशेषता 

अंदाज। । यही है, वेब पेज के लिए मूल रंग सेट करने के लिए, आपको इसे <body> टैग के अंदर पंजीकृत करने की आवश्यकता है। उदाहरण के लिए: <शरीर शैली = "पृष्ठभूमि-रंग: # 55D52B"> <p> साइट की पृष्ठभूमि # 55D52B </ p> </ body>

हेक्साडेसिमल रंग कोड के अलावा, मान कीवर्ड प्रारूप में समर्थित है या

आरजीबी। 

। उदाहरण:

<शरीर शैली = "पृष्ठभूमि-रंग: आरजीबी (51,255,153)"> <p> आरजीबी वेबसाइट की पृष्ठभूमि (23,113,44) </ p> </ body> <शरीर शैली = "पृष्ठभूमि-रंग: हरा"> <p> हरी वेबसाइट की पृष्ठभूमि </ p> </ body> कीवर्ड का उपयोग करके पृष्ठभूमि रंग को सेट करना शेष दो तरीकों की तुलना में कई प्रतिबंध हैं।

कुल 16 कीवर्ड रंग सेट करने के लिए समर्थित हैं। ये उनमे से कुछ है:

सफेद, लाल, नीला, काला, पीला अन्य। इसलिए, साइट के लिए पृष्ठभूमि सेट करने के लिए

हेक्साडेसिमल प्रारूप का उपयोग करना बेहतर है या 

रंग का चयन करने के अलावा, अन्य सेटिंग्स उपलब्ध हैं। अगर संपत्ति मूल्य ते करना पारदर्शक

पृष्ठ की पृष्ठभूमि पारदर्शी बन जाएगी। यह मान इस संपत्ति को डिफ़ॉल्ट रूप से सौंपा गया है। अब साइट के लिए पृष्ठभूमि पैटर्न स्थापित करने के लिए हाइपरटेक्स्ट भाषा की संभावना पर विचार करें। संपत्ति का उपयोग करके इसे बनाना संभव है। पृष्ठभूमि छवि।

उदाहरण: 

<बॉडी स्टाइल = "पृष्ठभूमि-छवि: यूआरएल (img_1809.jpg)"> </ बॉडी>

जैसा कि कोड से देखा जा सकता है, छवि बाध्यकारी पथ के माध्यम से होता है

यूआरएल

कोष्ठक में पोस्ट किया गया। लेकिन सभी तस्वीरें अपने आकार के साथ स्क्रीन के पूरे क्षेत्र को भरने के लिए इतनी बड़ी नहीं होतीं। चलो देखते हैं कि छोटे आंकड़े कैसे प्रदर्शित किए जाएंगे।

मान लीजिए कि हम कविता के बारे में एक साइट विकसित कर रहे हैं, और एक सब्सट्रेट के रूप में आपको पेगासस की छवि का उपयोग करने की आवश्यकता है। पंख वाला घोड़ा कवि के रचनात्मक विचार की स्वतंत्रता को व्यक्त करेगा!

हमें इसकी आवश्यकता है कि छवि एक बार स्क्रीन के बीच में प्रदर्शित हो। लेकिन, दुर्भाग्य से, ब्राउज़र हमारी उत्कृष्ट इच्छाओं को समझ में नहीं आता है। और स्क्रीन क्षेत्र को समायोजित करने के रूप में कई बार साइट की पृष्ठभूमि के लिए एक छोटी तस्वीर प्रदर्शित करता है:

शायद कवियों के पंखों के साथ चार मुस्कुराते घोड़े प्रेरणा के लिए बहुत अधिक होंगे। इसलिए, हमारे पेगासस के क्लोनिंग को प्रतिबंधित करें। यह संपत्ति का उपयोग कर करो

पृष्ठभूमि दोहराएँ। । संभावित मान: दोहराएं-एक्स - पृष्ठभूमि छवि की पुनरावृत्ति क्षैतिज रूप से;

इसलिए, हम कार्य को दो चित्रों से बैक बैकग्राउंड सेट करने की सुविधा प्रदान करते हैं: एनीमेशन और नियमित छवि। इस मामले में, जीआईएफ एनीमेशन तय हो जाएगा, और पृष्ठ की सामग्री के साथ ड्राइंग स्क्रॉल किया गया है।

दोहराएं-वाई - लंबवत;

दोहराएं - दोनों अक्षों पर;

दोहराना - पुनरावृत्ति निषिद्ध है।

सूचीबद्ध विकल्पों में से हम आखिरी में रुचि रखते हैं। साइट की पृष्ठभूमि बदलने से पहले, हम इसे आपके कोड में उपयोग करते हैं:

<शरीर शैली = "पृष्ठभूमि-छवि: यूआरएल (3.jpg); पृष्ठभूमि-दोहराना: नो-रिपीट"> </ body>

लेकिन, ज़ाहिर है, यह बेहतर है अगर हमारे लेटो स्क्रीन के बीच में स्थित है। संपत्ति

पृष्ठभूमि स्थिति बस पृष्ठ पर पृष्ठभूमि पैटर्न की स्थिति का इरादा है। स्थान निर्देशांक को कई तरीकों से सेट करें:
। यही है, वेब पेज के लिए मूल रंग सेट करने के लिए, आपको इसे <body> टैग के अंदर पंजीकृत करने की आवश्यकता है। उदाहरण के लिए: कीवर्ड (
<शरीर पृष्ठभूमि = "/ छवियों / bg.jpg"> शीर्ष, नीचे, केंद्र, बाएं, दाएं)
या प्रतिशत - उलटी गिनती ऊपरी बाएं कोने से शुरू होती है;
अगर कोई मंजिल प्रिय फारसी कालीन बढ़ता है तो कोई भी कमरा बहुत बेहतर लगेगा। तो आपकी साइट को बदतर? शायद यह समय और उसकी मंजिल है " माप की इकाइयों में (
(रंग चयन) पिक्सल
)। हम केंद्र के लिए सबसे आसान विकल्प का उपयोग करते हैं:

<बॉडी स्टाइल = "पृष्ठभूमि-छवि: यूआरएल (3.jpg); पृष्ठभूमि-दोहराना: नो-रिपीट; पृष्ठभूमि-स्थिति: शीर्ष केंद्र"> </ बॉडी>

ऐसा होता है कि स्क्रॉल करते समय आपको ड्राइंग की स्थिति को ठीक करने की आवश्यकता होती है। इसलिए, साइट की एक तस्वीर बनाने से पहले, एक विशेष संपत्ति का उपयोग करें।

पृष्ठभूमि संलग्न।

। मान्य मान: <ul> <li> स्क्रॉल; </ li> <li> फिक्स्ड। </ Li> </ ul>

हमें अंतिम अर्थ की आवश्यकता है। अब हमारे उदाहरण का कोड इस तरह दिखेगा: [/ एचटीएमएल] 
<बॉडी स्टाइल = "पृष्ठभूमि-छवि: यूआरएल (3.jpg); पृष्ठभूमि-दोहराना: नो-रिपीट; पृष्ठभूमि-स्थिति: शीर्ष केंद्र; पृष्ठभूमि-अनुलग्नक: फिक्स्ड"> </ बॉडी> 

पहले उदाहरण में, पृष्ठभूमि के लिए, हमने एक बड़े और सुंदर रेगिस्तान परिदृश्य का उपयोग किया। लेकिन ऐसी सुंदरता के लिए आपको पूर्ण भुगतान करना होगा। उच्च गुणवत्ता में प्रदर्शन की गई छवि का वजन कई मेगाबाइट तक पहुंच सकता है।

यह मात्रा ब्राउज़र पृष्ठ की डाउनलोड गति को इंटरनेट के साथ उच्च गति कनेक्शन के साथ प्रभावित नहीं करती है। लेकिन मोबाइल इंटरनेट के बारे में क्या, जिसका उपयोग कई डाउनलोड "

मीटर की दूरी पर

"बहुत समय लगेगा?

"बहुत समय लगेगा? इन सभी समस्याओं को एक बनावट पृष्ठभूमि का उपयोग करके हल किया जाता है। यह बनावट के एक पैटर्न के रूप में एक छोटी छवि का उपयोग करता है। यहां तक ​​कि इसकी कई पुनरावृत्ति की स्थिति के तहत, पैटर्न केवल एक बार लोड किया जाता है।

साइट के लिए एक अंधेरे पृष्ठभूमि बनाने के लिए तन। फोटोशॉप। तन। , एक लंबे 1200 पिक्सेल की एक पट्टी के रूप में एक छवि बनाएं, और 15 पिक्सल की चौड़ाई। फिर हम एक साधारण काले और सफेद ढाल का उपयोग करते हैं और परिणामी बनावट को साइट पृष्ठ पर जोड़ते हैं:

<बॉडी स्टाइल = "पृष्ठभूमि-छवि: यूआरएल (1. पीएनजी); रंग: आरजीबी (0,51,204)"> </ बॉडी>

स्पष्टता के लिए, हमने पाठ को जोड़ा और संपत्ति का उपयोग करके इसे रंग सेट किया। तन। रंग तन। । यही हुआ भी:

  • ऊंचाई: 200%; ऊपर वर्णित सभी गुण कैस्केडिंग स्टाइल शीट्स के लिए भी लागू होते हैं। साइट की पृष्ठभूमि बनाएं
  • पृष्ठभूमि चित्र सीएसएस।
  • हमारे पिछले उदाहरणों में से एक के कोड को फिर से लिखकर: <हेड> <शीर्षक> दस्तावेज़ शीर्षक रहित </ शीर्षक> <शैली प्रकार = "टेक्स्ट / सीएसएस"> बॉडी {पृष्ठभूमि-छवि: यूआरएल (3.jpg); पृष्ठभूमि-दोहराना: नो-रिपीट; पृष्ठभूमि-स्थिति: शीर्ष केंद्र; पृष्ठभूमि-अनुलग्नक: निश्चित;} </ style> </ head> <body> </ body>
  • परिणाम समान होगा। खैर, हमने सभी विकल्पों को देखा, साइट पर पृष्ठभूमि कैसे बदलें। अब यह केवल भविष्य कालीन की एक ड्राइंग बनाने और अपने संसाधन के पृष्ठों पर फैला हुआ है। लेकिन यह तुम्हारा हाथ है।
  • सबको सीखने और कुछ नया सीखने के लिए शुभ दिन! क्या आपने कभी पृष्ठों की पृष्ठभूमि की व्यवस्था करने के लिए आलसी होने पर साइटों की उपस्थिति पर ध्यान दिया है? और मैं बदल गया। यह वध दिखता है। अक्सर, विभिन्न प्रकार की जानकारी के बीच सामान्य अलगाव की कमी के कारण, यह मिश्रित होता है और बस इस तरह के एक वेब संसाधन को देखने की इच्छा गायब हो जाता है। ताकि आपकी परियोजना के साथ ऐसी परेशानी हुई, मैंने इस विषय पर एक लेख लिखने का फैसला किया: "एचटीएमएल में पृष्ठों की पृष्ठभूमि कैसे बनाएं।" प्रकाशन को पढ़ने के बाद, आप सीखेंगे कि आप किस टूल को पृष्ठभूमि डिज़ाइन सेट कर सकते हैं, पृष्ठभूमि को फिक्स्ड या बदलना और अधिक और अधिक बनाने के लिए, जो आपकी वेबसाइट को आकर्षक बनाने में मदद करेगा। चलो शुरू करते हैं!
  • पृष्ठभूमि वेब पृष्ठों को सेट करने के लिए मूल उपकरण पृष्ठभूमि छवि सेट करने के लिए, वेब-भाषा डेवलपर्स ने एक विशेषता पृष्ठभूमि प्रदान की है। यह एचटीएमएल और सीएसएस दोनों में उपलब्ध है।
  • मार्कअप भाषा में, यह बॉडी टैग की विशेषता है, और स्टाइल टेबल्स में - एक सार्वभौमिक संपत्ति जो आपको एक ही समय में पिछली योजना की 5 विशेषताओं की विशेषताओं को स्थापित करने की अनुमति देती है। पृष्ठभूमि एक काफी लचीला तत्व है जिसका उपयोग पृष्ठभूमि को रंग, रंगीन तस्वीर या यहां तक ​​कि एनीमेशन के रूप में कार्य करने के लिए किया जा सकता है। तो, यूनिट HTML <body> के माध्यम से पृष्ठभूमि छवि को स्थापित करने के लिए यह एक कोड लिखने के लिए पर्याप्त है:
  • <शरीर पृष्ठभूमि = "फ़ाइल पता"> ... </ body> और "फ़ाइल पता" शब्दों के बजाय चित्र के पथ को सम्मिलित करें।
  • हालांकि, नोटिस! यदि पृष्ठभूमि के रूप में आप रंग पैलेट से निर्दिष्ट मोनोचॉन कैनवास देखना चाहते हैं, तो यह बीजीकॉलर विशेषता का उपयोग करके किया जाता है। उदाहरण के लिए, <बॉडी BGColor = "# 000000"> ... </ body>, हमने अपनी साइट के लिए एक ब्लैक बैकग्राउंड से पूछा।
  • सीएसएस और एचटीएमएल में रंग या तो एक अंग्रेजी शब्द (उदाहरण के लिए, लाल), या एक विशेष कोड द्वारा सेट किए जाते हैं जिसमें एक साइन # और छह वर्ण होते हैं (उदाहरण के लिए, # एफएफडीएबी 9)। डेवलपर्स के लिए विशेष सॉफ्टवेयर उत्पादों में दूसरा विकल्प टाइप करते समय, पैलेट स्वचालित रूप से आपके सामने दिखाई देगा। यदि आपने अभी इन वेब भाषाओं को सीखना शुरू किया है, तो रंग कोड इंटरनेट पर लगाया जा सकता है।

कैस्केडिंग स्टाइल टेबल में संपत्ति के रूप में पृष्ठभूमि ऊंचाई: 200%; :

यह सीएसएस शैलियों, या <शैली> तत्व के साथ एक अलग फ़ाइल में स्थित या एक अलग फ़ाइल में है। इस संपत्ति के साथ, आप पृष्ठभूमि पैटर्न या रंग स्थापित कर सकते हैं, पृष्ठ पर प्रारंभिक स्थान निर्दिष्ट करें, पुनरावर्ती और निश्चित छवियों को सेट करें। अधिक स्पष्टता के लिए, मैंने टेबल में परिभाषाएं कीं। 

मापदंडों उद्देश्य

साइट की सामग्री के साथ एक निश्चित या स्क्रॉल की गई छवि को स्थापित करने के लिए उपयोग किया जाता है। निश्चित, स्क्रॉल और विरासत में होता है

पृष्ठभूमि छवि सेट करता है। इसे रंग के साथ एक साथ संकेत दिया जा सकता है। फिर उत्तरार्द्ध तब तक प्रदर्शित किया जाएगा जब तक कि तस्वीर पूरी तरह से लोड न हो जाए।

पिछले पैरामीटर के लिए ऑब्जेक्ट का प्रारंभिक स्थान सेट करता है। क्षैतिज सही, बाएं और केंद्र, और लंबवत - नीचे, शीर्ष और केंद्र इंगित करता है। इसके अलावा, आप स्थिति (विरासत), प्रतिशत, पिक्सेल और अन्य आयामों में स्थापित हो सकते हैं 

पृष्ठभूमि-छवि विशेषता का उपयोग करते समय आवेदन करें। विनियमित करता है कि छवि को दोहराया जाएगा। आप 2 मान निर्दिष्ट कर सकते हैं: क्षैतिज और लंबवत के लिए। विशेषताएं हैं: नो-रिपीट, दोहराना, दोहराना-एक्स, दोहराना-वाई, वारिस, स्पेस

Добавить комментарий