6

My website is working fine but when I click on File > print on browser (its browser print preview) all the CSS is messed and background color is replace with white spaces and not getting logo on preview page.

So how I create a CSS file for print preview and how I call when user click on print.

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
  • 2,754
  • 1
  • 26
  • 39
Pritesh Mahajan
  • 4,974
  • 8
  • 39
  • 64
  • 2
    The white background is because many browsers by default override the `background:` property to avoid users wasting ink/toner on background colors and artwork. In your browser's options area you'll find a way to disable this. However you cannot assume that your printing stylesheet (`@media`) will override the browser's settings. – Dai Oct 04 '12 at 07:30
  • Just Press Ctrl + F5 few times and see what happens. You have some problem on codes if those are still there after refresh – Jhilom Oct 04 '12 at 07:31
  • currently i m using mozilla but i have checked all browser @GhostAnswer – Pritesh Mahajan Oct 04 '12 at 07:35

5 Answers5

15

You need to provide your markup that for what you are having this error for..

Info : Browser default never prints background color, you need to enable that option in your browser..

Just in case if you are using 

<link rel="stylesheet" type="text/css" href="print.css" media="screen" />

Than replace this with media=screen, print so that it will apply rules to your website as well as printing..

<link rel="stylesheet" type="text/css" href="print.css" media="screen, print" />

You can also use print specific stylesheet like this :

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

You can also use print specific @media queries

@media print {
 /* Whatever */
}

Last but not the least to enable printing in your browser :

Firefox : Click on alt(if your browser menu bar is hidden) - File - Page Setup - Tick Print Background

Chrome : To enable printing in chrome use this CSS property -webkit-print-color-adjust:exact;

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
5

Create A Stylesheet For Print

<!-- Main stylesheet on top -->
<link rel="stylesheet" type="text/css" href="/global.css" mce_href="/global.css" href="/global.css" mce_href="/global.css" media="all" />
<!-- Print only, on bottom -->
<link rel="stylesheet" type="text/css" href="/print.css" mce_href="/print.css" href="/print.css" mce_href="/print.css" media="print" />

Do not display unnecessary elements in the print version

Web visitors print your page because of the content on it, not to see the supporting images on your website. Create a class called no-print and add that class declaration to DIVS, images, and other elements that have no print value:

.no-print { 
   display:none; 
}

<!-- Example -->
<div id="navigation" class="no-print">
   <!-- who needs navigation when you're looking at a printed piece? -->
</div>

Tips

  • Avoid Unnecessary HTML Tables
    Controlling the content area of your website can be extremely challenging when the page structure is trapped in a table.
  • Use Page Breaks Page breaks in the browser aren't as reliable as they are in Microsoft Word, especially considering the variable content lengths on dynamically created pages, but when utilized well make all the different in printing your website.
  • Size Your Page For Print Obviously your computer monitor can provide a large amount of width to view a page, but I recommend setting the content area width to 600px.

written by David Walsh

Michael Schmidt
  • 9,090
  • 13
  • 56
  • 80
2

Mr. Alien already answered why you didn't get any background color (this also applies for your background logo). However, you stated that your "CSS is messed".

For HTML pages there's a simple thing to keep in mind: don't print them. At least not your usual, heavily graphic based pages. Have you ever noticed how Google provides a special version of maps if you want to print your route? And almost every other page which provides search results or routes will also provide you a special facility for prints. Even Wikipedia has a printable version of every article. Those provide a very simple layout without unnecessary details as page navigation and background images.

The reason for this? CSS in print media is a huge mess. Stick to very basic layouts, provide the most necessary information with not too much distracting graphics. And if you really need to provide a printable version of a website prepare a PDF. Everything else is just masochism.

Community
  • 1
  • 1
Zeta
  • 103,620
  • 13
  • 194
  • 236
0

Try this, I hope this will help you

In mozilla browser, click file-page setup- Format and options tab Checked the print background option and then OK.

Now check the print

Ghost Answer
  • 1,458
  • 1
  • 17
  • 41
0

Mr. Alien's answer is right and I agree with that. I wanted to add some pics to that.

In chrome, print preview there are 2 settings, This is the options section in print preview. Here enable background and graphics.

we need to enable according to our choice.

Secondly, if you need all your css styles to appear in the print,

The attribute media in link tag will enable entire css for printing as well.

By specifying media as screen, print you will find the same page appearance in both monitor and printed media as well.

If you want to ommit certain styles during print, create a separate css file for printing and include as a link in the page. The css attributes of media print attribute only will picked for prining.

Naresh
  • 658
  • 1
  • 7
  • 22