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
Post a Comment