html5 - background sizing in css bindings? -


can please explain me going on property. css background img scales down half size retina pixel display density.

background: url('../img/kellin-retina.png') no-repeat scroll 0px 0px /200px 70px; 

what 0px 0px part before /200px 70px. if take out background doesn't scale down. these 2 pixel sizes binding to?

thanks

the first set 0px 0px defines position of background image (top left), second set 200px 70px defines dimensions, in short-hand notation represents background-size.

if have 1 value in second set, width of image. set height, can like:

background: url('../img/kellin-retina.png') no-repeat scroll 0px 0px /auto 70px; 

the background 70px high , width scaled accordingly. see demo, background image half high viewport.


Comments

Popular posts from this blog

ruby on rails - RuntimeError: Circular dependency detected while autoloading constant - ActiveAdmin.register Role -

c++ - OpenMP unpredictable overhead -

javascript - Wordpress slider, not displayed 100% width -