Skip to content
HTML/CSS to ImageDocs

Choose whether Chrome applies screen or print media styles when rendering.

The media_type parameter controls the CSS media type Chrome emulates. It affects @media rules, linked stylesheets with a media attribute, and JavaScript checks such as window.matchMedia().

Value Description
screen Apply styles intended for screens. This is the default when media_type is omitted.
print Apply print-specific styles, including rules inside @media print.
Terminal window
curl -X POST https://hcti.io/v1/image -u 'UserID:APIKey' \
--data-urlencode url="https://example.com" \
--data media_type=print
{
"url": "https://example.com",
"media_type": "print"
}

Example with different screen and print styles

Section titled “Example with different screen and print styles”
{
"html": "<article><h1>Quarterly report</h1><nav>Navigation</nav><p>Report content</p></article>",
"css": "article { padding: 32px; } @media screen { article { background: #eef6ff; } } @media print { nav { display: none; } article { background: white; color: black; } }",
"media_type": "print"
}

In this example, the navigation is hidden and the print color scheme is applied before the image is captured.

Use media_type: "print" to:

  • Preview a webpage’s print stylesheet
  • Hide navigation, controls, or other screen-only elements
  • Render layouts that use print-specific typography or page-break rules
  • Test how a page responds to window.matchMedia("print")

Need help?

Talk to a human. Email support@htmlcsstoimage.com and we’ll help you get started.