Preview in browser not displaying CSS backgrounds

Question

My site is working fine, but when I click File> Print In Browser (its preview in the browser), all CSS is messed up and the background color is replaced with spaces and does not get the logo on the preview page.

So, how do I create a CSS file for preview and how do I invoke when the user clicks on print.

Answer 1

You need to provide your markup for which you have this error ..

Information: By default, the browser never prints background color , you need to enable this option in your browser.

Just in case, if you use

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

Instead, replace media=screen, print so that it applies the rules to your website and also prints.

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

You can also use a special print style sheet as follows:

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

You can also use special @media print requests.

 @media print { /* Whatever */ } 

Last but not least, to enable printing in the 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;

Answer 2

Create a style sheet for printing

 <!-- 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 items in the print version

Web visitors print your page because of the content on it, and not to view supporting images on your website. Create a class called no-print and add this class declaration to DIVS, images and other elements that do not have 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
  Managing the content area of ​​your website can be extremely difficult when the page structure falls into the table.
• Using page breaks Page breaks in a browser are not as reliable as in Microsoft Word, especially considering the length of the contents of a variable on dynamically generated pages, but it’s good to do things differently when printing your site.
• The size of your printable page Obviously, your computer monitor can provide a large width for viewing the page, but I recommend setting the width of the content area to 600 pixels.

written by David Walsh

Answer 3

Mr. Alien already answered why you did not get any background color (this also applies to the background logo). However, you stated that your "CSS is confusing."

HTML pages have a simple thing: do not print them . At least not your regular, highly graphic pages. Have you ever noticed how Google offers a special version of maps if you want to print your route? And almost every other page that provides search results or directions will also provide you with a special printing tool. Even Wikipedia has a printable version of each article. They provide a very simple layout without unnecessary details in the form of page navigation and background images.

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

Answer 4

Try this, I hope this helps you

In the mozilla browser, click the "File Settings" button - the "Format and Options" tab. Check the print option and then click OK.

Now check print