How to Print an Image at the Top of the Media Print CSS

Using Cascading Style Sheets, you can write code that only affects Web pages when they are viewed with specific media, such as the screen of a mobile device, a screen reader for the visually impaired, or a printer. Styles written for printers allow you to control how pages print onto paper. Rarely will you want to make a website look the same on paper as it does in a browser, since doing so will waste the user's ink and create ugly cut-offs between pages. Using “@media” rules, you can create a whole other style for the printed version of your website, adding and subtracting styles at your discretion.

Instructions

1. Open the style sheet for your website and scroll to the bottom of its code. On a new line, add an “@media” rule for print as follows:

   @media print {
   }

   All style rules for the printed version of pages on your website will go between the curly braces of the “@media” rule. These styles build upon or change styles already applied to the screen version of your style sheet; in other words, the styles applied to the website when it is displayed in a browser.

2. Create a rule targeting the entire body of the Web page. Inside that rule, set the padding to equal the height of your image plus any space you need between the image and the rest of the page:

   @media print {
   body {
   padding: 200px;
   }
   }

3. Add the image as a background in the style rule for the body of the page:

   @media print {
   body {
   padding: 200px;
   background-image: url('path/to/image.png') center no-repeat;
   }
   }

   Change the file path inside “url()” to point to the location of the image on your Web server. Next, specify a position, such as “center” or “left.” Use “no-repeat” to prevent the image from tiling.