Using media_type

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

How it works

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().

Values

Render with print styles

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

{
  "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.

Common use cases

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?

We’re always looking to improve this documentation. Please send us an email: support@htmlcsstoimage.com. We respond fast.