How to Display a PNG with a Transparent Background in HTML
Embed a transparent PNG with <img>, style the layer behind it, and choose CSS backgrounds when the image is decorative.
Use a normal <img> element. A PNG’s alpha channel already contains its transparent pixels, so HTML needs no special transparency attribute. Whatever is painted behind the image remains visible through those pixels.
<img class="logo" src="logo.png" alt="Acme">
<style>
.logo {
width: 12rem;
height: auto;
background-color: #f2f2f2;
}
</style>The background color is optional. Remove it when the image should reveal the page behind it. Keep meaningful images in <img> so you can provide alternative text; use a CSS background when the graphic is purely decorative.
1. Embed the PNG with an image element
For a logo, product image, icon, diagram, or other content image, use src and an appropriate alt value.
<figure class="brand-lockup">
<img
src="/images/acme-mark.png"
alt="Acme"
width="512"
height="512"
>
<figcaption>Acme brand mark</figcaption>
</figure>Specifying intrinsic width and height helps the browser reserve space before the file finishes loading. CSS can then control the displayed size while preserving the aspect ratio.
2. Put a color behind the transparent pixels
Transparent pixels show the element’s own background or the background of an ancestor. Set either one with background-color.
.logo {
display: block;
width: 12rem;
height: auto;
padding: 1rem;
background-color: #f2f2f2;
}
.logo-wrap {
background-color: #102030;
padding: 2rem;
}<div class="logo-wrap">
<img class="logo" src="logo.png" alt="Acme">
</div>The image’s background is painted directly under the image box. A parent background can provide the surrounding surface and is useful when padding, borders, or other content must share the same color.
3. Choose <img> or a CSS background
| Use | Best choice | Reason |
|---|---|---|
| The image conveys information | <img> |
It supports an accessible text alternative through alt. |
| A logo or content illustration | <img> |
The image is part of the document’s meaning and has intrinsic sizing. |
| Texture, ornament, or decorative layering | CSS background-image |
The decoration stays out of the content exposed to assistive technology. |
| A responsive card backdrop | CSS background-image |
Positioning, repetition, and cover/contain behavior are built in. |
The HTML Standard says the img element must not be used as a layout tool. A transparent spacer or purely decorative shape should therefore be implemented with CSS. For meaningful content, use semantic markup and suitable alternative text. See the HTML Standard, MDN’s <img> reference, and MDN’s background-image reference.
4. Build a decorative background
For decoration, keep the information in normal HTML and apply the PNG in CSS.
<article class="card" aria-label="Featured product">
<h2>Product information</h2>
<p>Details remain readable without the decorative image.</p>
</article>
<style>
.card {
min-height: 18rem;
padding: 2rem;
background-color: #f2f2f2;
background-image: url("product-decoration.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
</style>CSS background images are not announced as meaningful images by assistive technology. Do not put essential information only in the background.
5. Size and fit the transparent PNG
Preserve the intrinsic ratio
.avatar {
width: min(100%, 20rem);
height: auto;
}Set one dimension and leave the other as auto for ordinary responsive use. The transparent area remains part of the image’s box, so it can affect alignment even though it does not paint pixels.
Fit an image inside a fixed box
.preview {
width: 20rem;
height: 12rem;
object-fit: contain;
object-position: center;
background-color: #202020;
}
.hero-art {
width: 100%;
height: 18rem;
object-fit: cover;
object-position: 50% 50%;
}contain keeps the complete PNG visible and may leave empty space. cover fills the box and can crop the image. Use object-position to move the visible area.
Fit a CSS background
.panel {
background-size: contain; /* show the complete image */
background-position: center;
background-repeat: no-repeat;
}
.panel--full {
background-size: cover; /* fill the box; cropping is possible */
}6. Accessibility checklist
- Write
alttext that communicates the image’s purpose in context, such asalt="Acme". - Use
alt=""for a decorative<img>that must remain in the document, and avoid putting meaningful information only in pixels. - Keep captions and surrounding text in HTML so they remain available when images are disabled.
- Do not use transparent
<img>files as spacers or layout tools.
What an image represents depends on its src and alt attributes. The MDN image reference documents alternative text and image sizing.
7. Common problems and fixes
| Symptom | Cause | Fix |
|---|---|---|
| White or unexpected rectangle | The PNG itself contains an opaque background, or a CSS background was applied. | Inspect the source PNG’s alpha channel and remove or change background-color. |
| Checkerboard pattern appears | The checkerboard is part of the exported file, not real transparency. | Re-export the asset with an alpha channel and verify it in an image editor. |
| Image does not load | Wrong URL, case-sensitive filename, or a server response that is not the image. | Open the URL directly, check the network response, and confirm the file path and MIME type. |
| Logo looks stretched | Both dimensions override the intrinsic ratio. | Set one dimension to auto, or use object-fit in a fixed box. |
| Transparent image is invisible | Its visible pixels are the same color as the surface behind it. | Temporarily set a contrasting background color or inspect the alpha channel. |
| Decorative image is announced | A meaningful alt value was supplied to a decorative image. |
Move it to CSS or use an empty alt value. |
| Background PNG does not appear | The element has no height, or the URL is relative to a different CSS file. | Give the element dimensions or content and resolve the URL relative to the stylesheet. |
8. Performance and reliability
- Use the smallest dimensions and color depth that preserve the required quality; transparent PNGs can be large because the alpha channel is stored with the image.
- Set intrinsic dimensions to reduce layout movement while the file loads.
- For below-the-fold content, consider
loading="lazy"; keep important above-the-fold images eager unless measurement shows otherwise. - Serve the file from a cacheable, reliable origin and use a long-lived filename when the bytes are immutable.
- Test the image over every intended background. Transparency changes appearance with contrast, not the PNG’s pixels.
9. Capture a transparent PNG for documentation or previews
If you need a rendered page or component image, a browser screenshot service can capture the HTML after CSS has painted the transparent layer. ScreenshotNeo supports transparent backgrounds, element capture by CSS selector, custom CSS and JavaScript, device presets, retina scale, resizing, and caching. Its response identifies the page verdict and whether the shot was billed.
Or skip the browser setup
Use ScreenshotNeo’s one-call API when you need a PNG of a page or element without maintaining browser automation. The API accepts a URL and returns PNG, JPEG, WebP, or PDF. See the ScreenshotNeo API documentation for all options.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" \
-d access_key=YOUR_API_KEY \
--data-urlencode url=https://example.com \
-o shot.webpPython
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://example.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));For a transparent capture, configure the transparent background option in the request. You can also wait for a selector, network idle, or a delay; hide selectors; block ads, trackers, requests, or resource types; provide headers, cookies, a user agent, authorization, timezone, and geolocation; and capture up to 100 URLs in one bulk call. Cookie and consent banners, newsletter popups, and chat widgets are removed before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and every response reports the verdict and billing headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. One thousand shots per month are free with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
10. FAQ
Does HTML need a transparent-background attribute?
No. Transparency is stored in the PNG’s alpha channel and is rendered automatically by <img> or CSS.
Can I change the color visible through the PNG?
Yes. Set background-color on the image or a containing element.
Should a transparent logo use <img> or CSS?
Use <img> when the logo is meaningful content and provide alternative text. Use CSS when it is decoration.
Why does object-fit not change a CSS background?
object-fit applies to replaced elements such as <img>. CSS backgrounds use background-size, background-position, and background-repeat.
Can a screenshot service preserve transparency?
Yes, when the service supports a transparent background option. ScreenshotNeo includes that option and can capture the rendered result after your page’s CSS runs.
