इस साल की शुरुआत में, WebKit ने सीएसएस background की शॉर्टहैंड प्रॉपर्टी के व्यवहार को अपडेट किया था. इस बदलाव से, background की शॉर्टहैंड प्रॉपर्टी, background-size को उसकी डिफ़ॉल्ट वैल्यू auto auto पर रीसेट कर देगी. हालांकि, ऐसा तब होगा, जब प्रॉपर्टी के शॉर्टहैंड में किए गए एलान में इसे सेट नहीं किया गया हो. यह बदलाव Chrome और दूसरे WebKit ब्राउज़र को निर्देशों के मुताबिक बनाता है. साथ ही, यह Firefox, Opera और Internet Explorer के व्यवहार से मेल खाता है.
Android के लिए Chrome में WebKit पर मौजूदा संशोधनों के साथ, यह बदलाव अब Android में रोल आउट किया जा रहा है. हालांकि, इससे वेबकिट में सुधार हुआ है. इसलिए, ऐसा हो सकता है कि कई ब्राउज़र पर टेस्ट की गई साइटों पर कोई असर न हो.
काम करने का पुराना तरीका
// background-size is reset to auto auto by the background shorthand
.foo {
background-size: 50px 40px;
background: url(foo.png) no-repeat;
}
background की शॉर्टहैंड प्रॉपर्टी में साइज़ की कोई प्रॉपर्टी नहीं है. इसलिए, यह background-size को इसकी डिफ़ॉल्ट वैल्यू auto auto पर रीसेट कर देगी.
इमेज का आकार बताने का सही तरीका
// background-size is specified after background
.fooA {
background: url(foo.png) no-repeat;
background-size: 50px 40px;
}
// background-size is specified inline after position
.fooB {
background: url(foo.png) 0% / 50px 40px no-repeat;
}
fooB में, background शॉर्टहैंड में background-size का इस्तेमाल करने के लिए ज़रूरी है कि पहले position (0%) की जानकारी दी जाए. इसके बाद, फ़ॉरवर्ड स्लैश और फिर background-size (50 पिक्सल 40 पिक्सल) की ज़रूरत होती है.
मौजूदा कोड में सुधार
ऐसे कई विकल्प हैं जो इस समस्या को आसानी से ठीक करने में आपकी मदद कर सकते हैं:
backgroundशॉर्टहैंड प्रॉपर्टी के बजाय,background-imageका इस्तेमाल करें.background-sizeको आखिरी में सेट करें, ताकि उस एलिमेंट परbackgroundसेट करने वाले किसी भी अन्य सीएसएस नियमों की तुलना में यह ज़्यादा सटीक हो. साथ ही,:hoverनियमों को देखना न भूलें.background-sizeपर!importantप्रॉपर्टी लागू करें.- साइज़ की जानकारी को
backgroundकी शॉर्टहैंड प्रॉपर्टी में ले जाएं.
बोनस: बैकग्राउंड इमेज ऑफ़सेट
इस बदलाव के अलावा, अब इमेज को बैकग्राउंड में जगह देने की सुविधा दी गई है. पहले, सिर्फ़ सबसे ऊपर बाएं कोने से इमेज की पोज़िशन तय की जाती थी. हालांकि, अब कंटेनर के किनारों से ऑफ़सेट तय किया जा सकता है. उदाहरण के लिए, background-position: right 5px bottom 5px; को सेट करने के लिए, इमेज को दाएं किनारे से 5 पिक्सल और सबसे नीचे से 5 पिक्सल की दूरी पर रखा जाएगा. यह JSBin पर सैंपल देखें