css - Swap image with text in print -
css - Swap image with text in print -
i utilize sprites insert images on page.
<div class="sprites logo1"></div> <div class="sprites logo2"></div>
however, when print page, unless settings changed print background images, nil printed.
i print text instead of logos. set image within div , hide @media screen
, show @media print
i'm not sure how deal sprites.
desired outcome print like:
<div>logo1</div> <div>logo2</div>
my css sprites looks lile this:
.sprites{ background: url(../logos.png) no-repeat top left } .logo1{ background-position: 0 0; width: 184px; height: 57px } .logo2{ background-position: 0 -60px; width: 175px; height: 34px }
so thought adding may right:
@media print { .logo1{ content: url(../logos.png) no-repeat 0 0; width: 184px; height: 57px } }
the problem solution, shows entire sprites image, condensed dimensions of logo. far seems solution cutting logos , utilize separate ones print version, bummer. suggestions?
you along these lines, making utilize of kellum method, as named zeldman:
html:
<div class="sprites logo1">text here</div> <div class="sprites logo2">text here</div>
css:
@media screen { .sprites { background: url(../logos.png) no-repeat top left text-indent: 100%; white-space: nowrap; overflow: hidden; } .logo1{ background-position: 0 0; width: 184px; height: 57px } .logo2{ background-position: 0 -60px; width: 175px; height: 34px } } @media print { .sprites { /* style text desired print */ } }
css css-sprites
Comments
Post a Comment