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

Popular posts from this blog

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer -

Accessing MATLAB's unicode strings from C -

javascript - mongodb won't find my schema method in nested container -