How to make HTML element to be displayed only when page is printed?

Question

I have this html element:

<img src="@Url.Content("~/Content/images/logo.png")" style="width:150px;height:80px;" alt="" />

How to make element above to be displayed only when page is printed, while in web it must be hided.

Any idea how can I achieve it?

use `@media print {display: block;}` – DunnoHowToCode Jul 05 '16 at 06:00 — DunnoHowToCode, Jul 05 '16 at 06:00

score 2 · Accepted Answer · answered Jul 05 '16 at 06:05

2

Don't need to create your own CSS when Bootstrap gives you the tools...

Following bootstrap synthax :

<img class="visible-print-block" src="@Url.Content("~/Content/images/logo.png")" style="width:150px;height:80px;" alt="" />

Here is some classes specific to print state :

.visible-print-block
.visible-print-inline
.visible-print-inline-block

answered Jul 05 '16 at 06:05

BENARD Patrick

cool,thank you! is there any way to print img element on every printed page using bootstrap? – Michael Jul 05 '16 at 06:33
Hmm. I'm not sure... It's not its jobs I think... But check this : http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page – BENARD Patrick Jul 05 '16 at 06:41

score 1 · Answer 2 · answered Jul 05 '16 at 06:02

1

Do something like this:

When in web mode - it would be hidden:

#printOnly {
  display : none;
 }

In print mode - It would be displayed:

 @media print {
  #printOnly {
  display : block;
 }
}

Place your image in div id=printOnly

answered Jul 05 '16 at 06:02

Sanjeev Kumar

score 1 · Answer 3 · answered Jul 05 '16 at 06:06

1

Maybe something like

@media screen
{
    .noPrint{}
    .noScreen{display:none;}
}

@media print
{
    .noPrint{display:none;}
    .noScreen{}
}

answered Jul 05 '16 at 06:06

3 Answers3