बॉडी बैकग्राउंड इमेजेज आसानी से पूरा

HTML

एक अच्छी सुविधा आपको कई साइटों पर मिलेगी जहां केंद्र सामग्री क्षेत्र पृष्ठ के पीछे एक ड्रॉप छाया के साथ ओवरले करने के लिए प्रकट होता है। यह वास्तव में एक एकल पृष्ठभूमि छवि के साथ अपने ब्लॉग को अच्छा (या अन्य वेबसाइट) बनाने के लिए एक काफी सरल विधि है।

यह कैसे किया जाता है?

  1. चित्र देखें कि आपकी सामग्री कितनी व्यापक है। उदाहरण: 750px।
  2. अपने चित्रण एप्लिकेशन में एक छवि बनाएं (मैं इलस्ट्रेटर का उपयोग करता हूं) सामग्री क्षेत्र की तुलना में व्यापक है। उदाहरण: 800px।
  3. उस पृष्ठभूमि की छवि सेट करें जिसे आप ब्लॉग के प्रत्येक पक्ष पर रखना चाहते हैं।
  4. पृष्ठभूमि पर एक सफेद क्षेत्र जोड़ें।
  5. सफेद क्षेत्र पर एक छाया लागू करें जो क्षेत्र के दोनों ओर से बाहर निकलती है।
  6. फसल क्षेत्र को ऊंचाई में 1 पिक्सेल द्वारा चौड़ाई निर्धारित करें। यह त्वरित रेंडरिंग के लिए अच्छी और कॉम्पैक्ट डाउनलोड करने के लिए छवि बनाएगा।
  7. छवि आउटपुट।

यहां बताया गया है कि मैंने इलस्ट्रेटर का उपयोग करके इसका निर्माण किया (ध्यान दें कि मेरे पास फसल क्षेत्र बहुत लंबा है ... बस इतना है कि आप देख सकते हैं कि मैं क्या कर रहा हूं):
इलस्ट्रेटर के साथ पृष्ठभूमि

यहां एक उदाहरण दिया गया है कि पृष्ठभूमि छवि के साथ आउटपुट कैसा दिखेगा:
पृष्ठभूमि छवि का उदाहरण

यहां बताया गया है कि अपने बॉडी स्टाइल टैग का उपयोग करके छवि को कैसे लागू किया जाए सीएसएस फ़ाइल.

पृष्ठभूमि: # B2B2B2 url ('छवियाँ / bg.gif') रिपीट-वाई केंद्र;

यहाँ पृष्ठभूमि शैली टैग का एक विच्छेदन है:

  • # B2B2B2 - पृष्ठ की समग्र पृष्ठभूमि का रंग निर्धारित करता है। इस उदाहरण में, यह पृष्ठभूमि की छवि पर ग्रे से मिलान करने के लिए ग्रे है।
  • url ('images / bg.gif') - वह बैकग्राउंड इमेज सेट करता है, जिसका आप उपयोग करना चाहते हैं।
  • दोहराना- y - छवि को y- अक्ष पर दोहराने के लिए सेट करता है। इसलिए पृष्ठ के ऊपर से नीचे तक पृष्ठभूमि छवि दोहराई जाएगी।
  • केंद्र - छवि को पृष्ठ के केंद्र में सेट करता है।

अच्छा और आसान ... एक छवि, एक शैली टैग!

2 टिप्पणियाँ

  1. 1
  2. 2

तुम्हें क्या लगता है?

यह साइट स्पैम को कम करने के लिए अकिस्मेट का उपयोग करती है। जानें कि आपका डेटा कैसे संसाधित किया जाता है.