सीएसएस का उपयोग कर पृष्ठभूमि छवि का आकार बदलने और फ़्लोट करने के लिए कैसे?

Question

मैं इस साइट पर काम कर रहा हूं: http://www.problemio.com और मुझे पृष्ठभूमि बैनर को शीर्ष बैनर में जोड़ने की आवश्यकता है जो मैंने किया था।

क्या मैं यह नहीं समझ सकता कि यह कैसे करना है, इसे सही तरीके से कैसे स्थानांतरित करना है और इसे लंबाई में छोटा बनाना है ताकि यह केवल स्क्रीन चौड़ाई का आधा हिस्सा ले सके।

कोई विचार यह कैसे करना है? अब तक मैं समग्र बैनर div के लिए इस सीएसएस है:

.banner 
{ 
    width:60em; 
    margin: 0 auto; 
    position: relative; 
    padding: 0.3em 0; 
    z-index: 1; 
    background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png'); 
    background-repeat: no-repeat; 
    background-image: right-align 
} 

लेकिन मैं कैसे पृष्ठभूमि छवि दाएं संरेखित बनाने और div की पूरी चौड़ाई का 50% होने की rescale करने पता नहीं है। कोई विचार?

धन्यवाद!

Answer 1

आप पृष्ठभूमि संरेखित के लिए left, right, bottom, top और center उपयोग कर सकते हैं। प्रतिशत भी।

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') right no-repeat; 

हालांकि, आप सीएसएस 2 का उपयोग कर छवियों का आकार बदल नहीं सकते हैं लेकिन CSS3 में।

background-size: <width> <height>; 

अधिक उपयोग:

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') top right no-repeat; 

नीचे संरेखित और केंद्रित करने के लिए:

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') bottom center no-repeat; 

Answer 2

उपयोग background-position: right; और background-size: [width] [height] (जहां आवश्यक मान बदलें)।