आपकी साइट पर मजेदार सीएसएस पृष्ठभूमि कैसे जोड़ें
समय एक वेब पेज पृष्ठभूमि एक छोटी टाइलिंग छवि थी - और अक्सर छिपी हुई, हर आगंतुक की आंखों पर हमला करती है। आज, पृष्ठभूमि अधिक ऑनलाइन ग्राफिक डिजाइन की नींव बनाती है।
वेब पर पृष्ठभूमि में यह क्रांति सीएसएस में प्रगति से प्रेरित की गई है। वेब मानकों अब अब तक अधिक नियंत्रण प्रदान करते हैं, ताकि आप पृष्ठभूमि की स्थिति को ध्यान से परिभाषित कर सकें, ग्रेडियेंट के साथ काम कर सकें, और एक तत्व को एकाधिक पृष्ठभूमि जोड़ सकें।
इस क्षेत्र में सबकुछ को कवर करने के लिए एक पुस्तक की आवश्यकता होगी, और इसलिए हमने आपको जाने के लिए कुछ महत्वपूर्ण प्रारंभिक अंक चुने हैं, और आपके लिए अजीब विकल्प लिंक आगे बढ़ने के लिए चुना है। का आनंद लें!
वेब पेज तत्वों को सीएसएस पृष्ठभूमि जोड़ें
सीएसएस पृष्ठभूमि की आवश्यकता होती है पृष्ठभूमि शॉर्टेंड संपत्ति, या अधिक विशिष्ट गुणों का उपयोग, जैसे (लेकिन सीमित नहीं): पृष्ठभूमि का रंग ; पृष्ठभूमि छवि ; पृष्ठभूमि स्थिति ; पृष्ठभूमि का आकार ; पृष्ठभूमि दोहराएँ ; तथा पृष्ठभूमि संलग्न । इन्हें वेब पेज की पृष्ठभूमि के लिए परिभाषित किया जा सकता है (के माध्यम से) तन चयनकर्ता) या शीर्षक, divs, और इसी तरह के पृष्ठ तत्व।
सबसे बुनियादी स्तर पर, आप उपयोग कर सकते हैं पृष्ठभूमि एक पृष्ठ लाल करने के लिए:
शरीर {
पृष्ठभूमि: लाल;
} थोड़ा और उन्नत जाकर, आप एक ऐसी छवि जोड़ सकते हैं जो क्षैतिज केंद्रित है, अपने कंटेनर के शीर्ष से 20px, दोहराया नहीं गया है, और वेब पेज स्क्रॉल के रूप में स्थान पर तय किया गया है:
शरीर {
पृष्ठभूमि: यूआरएल (image.png) केंद्र 20px नो-रिपीट फिक्स्ड;
}
यदि आप इसका उपयोग किए बिना लिखना चाहते थे पृष्ठभूमि शॉर्टेंड, यह इस तरह दिखेगा:
शरीर {
पृष्ठभूमि-छवि: यूआरएल (छवि। पीएनजी);
पृष्ठभूमि-स्थिति: केंद्र 20px;
पृष्ठभूमि-दोहराना: नो-रिपीट;
पृष्ठभूमि-अनुलग्नक: निश्चित;
} क्या आप किसी तत्व को एकाधिक पृष्ठभूमि जोड़ना चाहते हैं, आप सीएसएस घोषणा में अल्पविराम-अलग मूल्य सेट कर सकते हैं। ध्यान दें कि जो भी आइटम पहले निर्दिष्ट किया गया है वह स्टैक के शीर्ष पर है, जिसका अर्थ है कि यह 'ऊपर' अन्य पृष्ठभूमि प्रदर्शित करेगा।
शरीर {
पृष्ठभूमि: यूआरएल (image.png) केंद्र 20px नो-रिपीट फिक्स्ड, यूआरएल (छवि -2.PNG) केंद्र केंद्र नो-रिपीट फिक्स्ड;
} इस मामले में, एक छवि पिछले उदाहरण में दिखाई देती है, और सामग्री क्षेत्र के केंद्र में सीधे 'नीचे'।
पृष्ठभूमि छवियों का आकार बदलें
अब तक, हमने टाल दिया है पृष्ठभूमि का आकार । लेकिन वह बहुत महत्वपूर्ण है, क्योंकि यह आपको पृष्ठभूमि छवि के आकार को नियंत्रित करने में सक्षम बनाता है। विशेष रूप से, आप पिक्सेल या प्रतिशत शर्तों में एक छवि के क्षैतिज और लंबवत आयामों को परिभाषित कर सकते हैं, जैसे कि:
पृष्ठभूमि आकार: 200 पीएक्स 50 पीएक्स; दो कीवर्ड मान भी हैं, जिनका उपयोग इसके बजाय किया जा सकता है: शामिल तथा आवरण । ये व्यापक रूप से समान हैं, एक तत्व के सामग्री क्षेत्र के भीतर एक छवि को स्केल करने का एक तरीका प्रदान करने में। अंतर यह है शामिल जितना संभव हो सके एक छवि बनाने के लिए डिज़ाइन किया गया है, जबकि अभी भी सामग्री क्षेत्र के भीतर यह सब दिखा रहा है (जिसका अर्थ है कि आप आमतौर पर इसके चारों ओर अंतराल प्राप्त करते हैं), जबकि आवरण पूरी तरह से सामग्री क्षेत्र को कवर करता है, लेकिन परिणामस्वरूप कुछ छवि दिखाई नहीं दे रही है। उत्तरार्द्ध आमतौर पर उन साइटों पर उपयोग किया जाता है जो पृष्ठभूमि के रूप में तस्वीरों का उपयोग करते हैं।
ध्यान दें कि आप जोड़ सकते हैं पृष्ठभूमि का आकार एक पृष्ठभूमि शॉर्टहैंड परिभाषा - इसके बाद इसे रखें पृष्ठभूमि स्थिति मूल्य, दो को अलग करने के लिए एक आगे स्लैश के साथ:
पृष्ठभूमि: यूआरएल (छवि.पीएनजी) केंद्र 20 पीएक्स / नो-रिपीट फिक्स्ड उच्च-रेज रेटिना पृष्ठभूमि छवियों का उपयोग करें
उच्च-रेस रेटिना पृष्ठभूमि जोड़ने पर, पृष्ठभूमि का आकार ऐसी छवियों को सही आकार में प्रकट करने के लिए भी उपयोगी है।
उदाहरण के लिए, कल्पना करें डिव एक साथ ईद का प्रतीक चिन्ह । यह, उचित रूप से, एक लोगो को सीएसएस में पृष्ठभूमि के रूप में लागू किया गया है। यह 150 पिक्सल वर्ग है, और इसलिए मूल सीएसएस आप का उपयोग करेंगे:
#Logo {
चौड़ाई: 150 पीएक्स;
ऊंचाई: 150px;
पृष्ठभूमि: यूआरएल (logo.png) नो-रिपीट;
} उच्च-रेस चीजों को जटिल बनाता है। हम बड़ी छवियों को लोड करने के लिए पुराने हार्डवेयर को मजबूर नहीं करना चाहते हैं, और इसलिए एक मीडिया क्वेरी का उपयोग उच्च-रिज़ॉल्यूशन लोगो को केवल समर्थित हार्डवेयर पर लोड करने के लिए किया जाना चाहिए।
@media (-वेबिट-मिन-डिवाइस-पिक्सेल-अनुपात: 2),
(न्यूनतम संकल्प: 192 डीपीआई) {
#प्रतीक चिन्ह {
पृष्ठभूमि-छवि: यूआरएल ([email protected]);
}
} समस्या अब @ 2x उच्च-रेज छवि 300 पिक्सेल स्क्वायर है (क्योंकि इसमें मूल का दोगुना दोगुना है), लेकिन 150 पिक्सेल-स्क्वायर कंटेनर के लिए पृष्ठभूमि के रूप में उपयोग किया जाता है। तो इस बिंदु पर, आप केवल एक चौथाई देखें।
यह एक विशिष्ट असाइन करके तय किया गया है पृष्ठभूमि का आकार के लिए मूल्य #प्रतीक चिन्ह :
#Logo {
चौड़ाई: 150 पीएक्स;
ऊंचाई: 150px;
पृष्ठभूमि: यूआरएल (logo.png) नो-रिपीट;
पृष्ठभूमि आकार: 150px 150px;
}
एकाधिक पृष्ठभूमि संकल्पों के साथ काम करने और एक ही परिणाम प्राप्त करने की एक और आधुनिक विधि CSS4 है चित्र स्थित :
#Logo {
पृष्ठभूमि छवि: छवि-सेट (
url (logo.png) 1x,
URL ([email protected]) 2x
);
} के फायदे है चित्र स्थित सरल सीएसएस हैं, और उपयोगकर्ता एजेंट उस छवि को निर्धारित कर रहा है जिसका उपयोग किया जाना चाहिए। डाउनसाइड ब्राउज़र समर्थन है - लेखन के समय - अपूर्ण बनी हुई है। [20 9] इस परीक्षण पृष्ठ पर जाएं
अल्फा चैनल और ग्रेडियेंट्स के साथ काम करें
इस चमकदार फास्ट में हमारी अंतिम युक्ति (वेबसाइट ट्यूटोरियल शर्तों में) लेख अल्फा चैनल और ग्रेडियेंट से संबंधित है। जब इंटरनेट भाप संचालित होता था, तो आपके पास अक्सर डिजाइनर अल्फा चैनलों को अनुकरण करने के लिए 'चेकरबोर्ड' gifs का उपयोग करते थे (हर दूसरे पिक्सेल पारदर्शी थे)। अब, आप केवल आरजीबीए में रंग असाइन करते हैं:
मुख्य {
पृष्ठभूमि: आरजीबीए (255,255,255,0.7);
} उपर्युक्त उदाहरण में, पृष्ठभूमि 70 प्रतिशत सफेद होगी, जो इसके नीचे दिखने की इजाजत दे रही है। जटिल इमेजरी से ऊपर अर्ध-पारदर्शी पृष्ठभूमि का उपयोग करते समय आपको स्पष्टता बनाए रखने की सावधानी बरतनी चाहिए, लेकिन वे वेब पृष्ठों में दृश्य रुचि जोड़ने के लिए बहुत अच्छा हो सकते हैं।
इसी प्रकार, वेब डिजाइनर जीआईएफ को आउटपुट और टाइल करते थे, अगर वे पृष्ठभूमि के रूप में ढाल चाहते थे, लेकिन यह अब आवश्यक नहीं है, जब तक कि आप इसे 1 999 की तरह पार्टी नहीं करना चाहते हैं। इन दिनों, आप सीएसएस 3 चाहते हैं रैखिक ढलान तथा रेडियल-ग्रेडिएंट गुण, जिसके लिए आप दिशाओं और रंगों को परिभाषित करते हैं।
यहां एक मूल ढाल के साथ एक सीएसएस नियम है:
एच 1 {
पृष्ठभूमि: रैखिक-ढाल (दाईं ओर, आरजीबीए (255,255,255,1), आरजीबीए (255,255,255,0));
} यह स्तर-एक शीर्षकों पर लागू किया जाएगा, जिससे उन्हें एक रैखिक ढाल होता है जो बाएं से दाएं होता है, ठोस सफेद से शुरू होता है और पारदर्शी सफेद में समाप्त होता है।
कोणों और एकाधिक रंग स्टॉप का उपयोग करके, आप ग्रेडियेंट के साथ बहुत आगे जा सकते हैं। प्रयोग करने के लिए, फ़ोटोशॉप-जैसे का उपयोग करने का प्रयास करें सीएसएस ढाल जनरेटर और कोड आउटपुट की जांच करना (उस लिंक किए गए उदाहरण को ध्यान में रखते हुए पुराने ब्राउज़रों के लिए सिंटैक्स जोड़ता है - बस पकड़ो रैखिक ढलान अपने स्वयं के उपयोग के लिए लाइन)।
यदि आप यह देखते हुए कि अनुभवी वेब पेशेवर ग्रेडियेंट के साथ क्या कर सकते हैं पृष्ठभूमि का आकार , ली Verou की जाँच करें CSS3 पैटर्न गैलरी । वहां आपको लाइव उदाहरणों का भार मिलेगा जो सभी प्रकार के गंभीर प्रभावशाली पृष्ठभूमि पैटर्न बनाने के लिए सीएसएस ग्रेडियेंट का उपयोग करते हैं।
और, हां, एक संकेत है कि हम उनमें से कुछ में नेत्रगोलक हमले के बारे में कहां आए थे।लेकिन जब वेब पृष्ठभूमि की बात आती है तो सबकुछ के साथ, यह सुनिश्चित करना कि आप जो भी जोड़ते हैं वह आपके डिज़ाइन के संदर्भ में प्रासंगिक है और - सबसे महत्वपूर्ण बात यह है कि पृष्ठभूमि सामग्री से विचलित नहीं होती है, या इसे अवैध रूप से बना देती है।
सम्बंधित लिंक्स:
- बेहतर सीएसएस लिखने के लिए एक गाइड [2 9 0]
- CSS ग्रिड के साथ एक उत्तरदायी लेआउट बनाएँ [2 9 0]
-
सीएसएस ट्रिक्स अपने लेआउट को क्रांतिकारी बनाने के लिए
[2 9 0]
[2 9 9]
कैसे करना है - सर्वाधिक लोकप्रिय लेख
How to rank in Google
कैसे करना है Sep 14, 2025(छवि क्रेडिट: बज़फीड) [1 9] तो, आप जानना चाहते है�..
How to turn off web notifications for Windows, macOS and Android
कैसे करना है Sep 14, 2025(छवि क्रेडिट: भविष्य) [1 9] यदि आप एक नियमित वेब �..
How to turn WordPress into a visual builder
कैसे करना है Sep 14, 2025(छवि क्रेडिट: Elementor / जोसेफ फोर्ड) [1 9] विजुअल बिल�..
How to build a chatbot interface
कैसे करना है Sep 14, 20252000 के दशक के मध्य में, आभासी एजेंटों और ग्राहक सेवा..
How to get started with TypeScript
कैसे करना है Sep 14, 2025टाइपस्क्रिप्ट उन भाषाओं में से एक है जो उपयोग करत..
The secrets of fulfilling a creative design brief
कैसे करना है Sep 14, 2025मेरे ट्यूटर्स में से एक ने एक बार मुझे बताया कि अगर वह अपने बाकी के जीवन के..
Create quality digital copies of your art
कैसे करना है Sep 14, 2025कला सिर्फ बनाने के बारे में नहीं है, यह साझा करने के बारे में भी है। एक बार �..
Speed up your 3D modelling
कैसे करना है Sep 14, 2025इस ट्यूटोरियल में एक संपत्ति बनाने की प्रक्रिया �..
श्रेणियाँ
- एआई और मशीन लर्निंग
- AirPods
- वीरांगना
- अमेज़ॅन एलेक्सा और अमेज़ॅन इको
- अमेज़न एलेक्सा और अमेज़न इको
- अमेज़न आग टीवी
- अमेज़न प्रधानमंत्री वीडियो
- एंड्रॉयड
- Android फ़ोन और टेबलेट
- Android फोन और टैबलेट
- Android टीवी
- एप्पल
- Apple App स्टोर
- एप्पल HomeKit और एप्पल HomePod
- एप्पल संगीत
- एप्पल टीवी
- एप्पल घड़ी
- एप्लिकेशन और वेब Apps
- ऐप्स और वेब ऐप्स
- ऑडियो
- Chrome बुक और क्रोम ओएस
- क्रोमबुक और क्रोम ओएस
- Chromecast
- बादल और इंटरनेट
- बादल और इंटरनेट
- क्लाउड और इंटरनेट
- कंप्यूटर हार्डवेयर
- कंप्यूटर इतिहास
- गर्भनाल काटने और स्ट्रीमिंग
- कॉर्ड कटिंग और स्ट्रीमिंग
- कलह
- डिज्नी +
- DIY
- बिजली के वाहन
- EReaders
- अनिवार्य
- व्याख्यार
- फेसबुक
- जुआ
- जनरल
- Gmail
- गूगल
- गूगल सहायक और गूगल नेस्ट
- Google सहायक और Google नेस्ट
- गूगल क्रोम
- गूगल डॉक्स
- को Google डिस्क
- गूगल मैप्स
- गूगल प्ले स्टोर
- Google शीट
- Google स्लाइड
- गूगल टीवी
- हार्डवेयर
- एचबीओ मैक्स
- कैसे करना है
- Hulu
- इंटरनेट स्लैंग और लघुरूप
- IPhone और IPad
- Kindle
- लिनक्स
- मैक
- रखरखाव और अनुकूलन
- माइक्रोसॉफ्ट एज
- माइक्रोसॉफ्ट एक्सेल
- माइक्रोसॉफ्ट ऑफिस
- माइक्रोसॉफ्ट आउटलुक
- Microsoft PowerPoint
- माइक्रोसॉफ्ट टीमें
- माइक्रोसॉफ्ट वर्ड
- मोज़िला फ़ायरफ़ॉक्स
- Netflix
- Nintendo स्विच
- पैरामाउंट +
- पीसी गेमिंग
- मयूर
- फोटोग्राफी
- फ़ोटोशॉप
- प्लेस्टेशन
- गोपनीयता और सुरक्षा
- निजता एवं सुरक्षा
- गोपनीयता और सुरक्षा
- उत्पाद मवेशियों को इकट्ठा
- प्रोग्रामिंग
- रास्पबेरी Pi
- Roku
- सफारी
- सैमसंग फ़ोन और टेबलेट
- सैमसंग फोन और टैबलेट
- स्लैक
- स्मार्ट होम
- Snapchat
- सामाजिक मीडिया
- अंतरिक्ष
- Spotify
- Tinder
- समस्या निवारण
- टीवी
- ट्विटर
- वीडियो गेम
- आभासी वास्तविकता
- के VPN
- वेब ब्राउज़र
- वाईफ़ाई और रूटर
- वाईफाई और राउटर
- विंडोज
- Windows 10
- विंडोज 11
- विंडोज 7
- एक्सबॉक्स
- यू ट्यूब के यूट्यूब टीवी
- YouTube और YouTube टीवी
- ज़ूम
- Explainers