Improper use of CSS background-size

Web Development

Order and omissions matter when it comes to CSS. Until recently there was a quirk in the WebKit rendering engine related to the shorthand background property. The good news is that it has been fixed; the bad news is that it potentially breaks legacy code. If the background-size property is set prior to declaring background property it no longer behaves in the same fashion. The simplest solution is to declare the size of a background image in the background property.

code:

a.icon.good2 {
	background: #215387 url(test-sprite@2x.png) 4px -6px / 40px 82px no-repeat;
	}

Note: Including the size in the background property is not supported in older browsers. See example 2 below for a more backwards compatible solution.

Issue:

The W3C spec for the background shorthand property specifies that when declared without a size property it initializes size to ‘background-size: auto auto;’. Previously there was quirk with WebKit where if size was omitted it just didn’t initialize the size property for the background. This allowed for a previously declared background-size declaration to remain intact, displaying the image at its proper size. This quirk has since been removed and the latest release of WebKit now follows the W3C spec.

Bad code

a.icon {
	background-size: 40px 82px;
	}
a.icon.bad {
	background: #215387 url(test-sprite@2x.png) 4px -6px no-repeat;
	}

Produces

Solution

1. Add size to the background short-hand property and eliminate the background-size property

Code

a.icon.good2 {
     background: #215387 url(test-sprite@2x.png) 4px -6px / 40px 82px no-repeat;
}

Produces

2. If you must resize a background-image via a background-size property declare background size after the background property so it isn’t overridden.

Code

a.icon.good {
	background: #215387 url(test-sprite@2x.png) 4px -6px no-repeat;
	}
a.icon.good {
	background-size: 40px 82px;
	}

Produces

References:

http://www.w3.org/TR/css3-background/#the-background
https://bugs.webkit.org/show_bug.cgi?id=97761
http://lists.w3.org/Archives/Public/www-style/2012Oct/0112.html
http://caniuse.com/#search=background-size

About Rory C-B

Rory is a part of the Website Relations team. He works with the BlackBerry Browser team to ensure you receive the best possible experience when surfing the 'net. He can also be found haunting the developer forums, contributing to bbUI.js and on Twitter (@roryboy).

Join the conversation

Show comments Hide comments
+ -
  • http://rcraigbarnes.wordpress.com Rory C-B

    Reblogged this on rcraigbarnes.

  • http://sadyebihcldmt.wordpress.com/2014/07/19/yoga-teachers-and-the-yoga-alliance/ goldschlager cinnamon schnapps

    goldschlager cinnamon schnapps

    Improper use of CSS background-size | BlackBerry Developer Blog

  • https://www.rebelmouse.com/francisca8206/never-changing-bendir-man-mass-726619968.html remo frame drum holder

    remo frame drum holder

    Improper use of CSS background-size | BlackBerry Developer Blog

  • https://rebelmouse.com/alannah31lnnwdld/the-benefits-of-marine-freezer-726672550.html marine mini refrigerator ac dc

    marine mini refrigerator ac dc

    Improper use of CSS background-size | BlackBerry Developer Blog

  • https://www.rebelmouse.com/alexandricrump/fascinating-storage-units-milw-726715844.html interstate wheaton moving company reviews

    interstate wheaton moving company reviews

    Improper use of CSS background-size | BlackBerry Developer Blog

  • http://altonj42hhtxwi.wordpress.com/2014/09/18/9-easy-steps-to-a-winning-tar-frame-drum-lesson-strategy/ Rique Uresti

    Rique Uresti

    Improper use of CSS background-size | BlackBerry Developer Blog

  • https://www.rebelmouse.com/williams7958/the-simple-sanders-moving-and--721300798.html movers Carrying Straps

    movers Carrying Straps

    Improper use of CSS background-size | BlackBerry Developer Blog

  • http://janewallereknvxd.newsvine.com/_news/2014/05/01/23702236-no-hassle-hair-loss-secrets Low Level Laser therapy for hair loss

    Low Level Laser therapy for hair loss

    Improper use of CSS background-size | BlackBerry Developer Blog

  • https://www.rebelmouse.com/brunotbnfhboznflu/choosing-riquisimo-i24news-in--726043312.html Bendirman Ghneya Lik \U063A\U0646\U0627\U064A\U0629 \U0644\U064A\U0643

    Bendirman Ghneya Lik \U063A\U0646\U0627\U064A\U0629 \U0644\U064A\U0643

    Improper use of CSS background-size | BlackBerry Developer Blog

  • http://afn-pt.goodbarry.com/ForumRetrieve.aspx?ForumID=474&TopicID=874381&NoTemplate=False regime thonon menu

    regime thonon menu

    Improper use of CSS background-size | BlackBerry Developer Blog

  • http://junkostowell.wordpress.com/1984/07/21/fear-not-if-you-use-cockpit-freezer-the-right-way/ Carnival Victory deck plans

    Carnival Victory deck plans

    Improper use of CSS background-size | BlackBerry Developer Blog

  • http://eurostaete.org/ruilen/Hermes.html エルメス マリッジリング

    エルメス マリッジリング

    Improper use of CSS background-size | BlackBerry Developer Blog

  • http://businessitsupportuk.weebly.com/blog/how-can-you-pick-the-right-it-support-company-for-your-business business it support

    business it support

    Improper use of CSS background-size | BlackBerry Developer Blog

  • https://bitbucket.org/alexbervn Alex Ber

    Alex Ber

    Improper use of CSS background-size | BlackBerry Developer Blog

  • https://Rebelmouse.com/gfdowenhrzpzkal/8-life-saving-tips-about-world-728181051.html tappan's Handbook of healing Massage techniques 4th Edition

    tappan’s Handbook of healing Massage techniques 4th Edition

    Improper use of CSS background-size | BlackBerry Developer Blog

  • http://www.sickchixxx.com/temple/2008/12/off-to-california/trackback/ Visit Homepage

    Visit Homepage

    Improper use of CSS background-size | BlackBerry Developer Blog

  • http://verakeelingc.wordpress.com/2014/09/19/spray-tanning-salons-wichita-ks-on-a-budget-3-tips-from-the-great-depression/ fake tan lotion during pregnancy

    fake tan lotion during pregnancy

    Improper use of CSS background-size | BlackBerry Developer Blog

  • http://sochealth.wp-Hosting.co.uk/2013/10/22/doctors-nurses-act-surrogate-immigration-officials/ gestational surrogate

    gestational surrogate

    Improper use of CSS background-size | BlackBerry Developer Blog

  • http://www.weedkipedia.info/Nutritional_Requisites_for_Pregnant_Dog dog pregnancy cycle week by week

    dog pregnancy cycle week by week

    Improper use of CSS background-size | BlackBerry Developer Blog

blog comments powered by Disqus