इस साल की शुरुआत में, WebKit ने सीएसएस background शॉर्टहैंड प्रॉपर्टी के काम करने के तरीके को अपडेट किया. इस बदलाव के बाद, अगर शॉर्टहैंड एलान में background-size की वैल्यू सेट नहीं की गई है, तो 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नियमों की जांच करना न भूलें.!importantप्रॉपर्टी कोbackground-sizeपर लागू करें.- साइज़ की जानकारी को
backgroundशॉर्टहैंड प्रॉपर्टी में ले जाएं.
बोनस: बैकग्राउंड इमेज के ऑफ़सेट
इस बदलाव के अलावा, अब बैकग्राउंड में इमेज को अपनी पसंद के मुताबिक रखा जा सकता है. पहले, सिर्फ़ सबसे ऊपर बाएं कोने से इमेज की स्थिति तय की जा सकती थी. अब कंटेनर के किनारों से ऑफ़सेट तय किया जा सकता है. उदाहरण के लिए, background-position: right 5px bottom 5px; सेट करने पर, इमेज को दाएं किनारे से 5 पिक्सल और नीचे से 5 पिक्सल की दूरी पर रखा जाएगा. JSBin पर यह सैंपल देखें