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

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

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

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