Transparent Backgrounds
Create images with transparent backgrounds for logos, overlays, and more
Table of contents
- Implementation
- Examples
- Common Use Cases
- Best Practices
- URL-based Screenshots
- Troubleshooting
- Browser Compatibility
- Need help?
Implementation
To render an image with a transparent background, set the background color to transparent in your CSS:
body {
background-color: transparent;
}
PNG Format Required
Transparency is only supported in PNG format. JPG and WebP images will render with a white background.
Examples
Basic Example
This image demonstrates a transparent background:
Code Example
<div class="logo-container">
<img src="logo.png" alt="Company Logo">
</div>
body {
background-color: transparent;
}
.logo-container {
padding: 20px;
/* Any background styling here will be included in the image */
}
Common Use Cases
- Logos: Create logo variations with transparent backgrounds
- Overlays: Generate images that layer well with other content
- Icons: Design icons that work on any background
- Watermarks: Create watermarks that blend seamlessly
Best Practices
Do’s
- Always use PNG format for transparent backgrounds
- Test your image on different colored backgrounds
- Consider adding a subtle shadow for better visibility
- Use the
device_scale
parameter for higher quality
Don’ts
- Don’t use JPG format when transparency is needed
- Don’t assume white is transparent
- Don’t forget to set
background-color: transparent
URL-based Screenshots
When capturing screenshots from URLs, add the CSS via the API parameters:
{
"url": "https://example.com",
"css": "body { background-color: transparent; }"
}
Troubleshooting
Common Issues
- White Background Appears
- Ensure you’re using PNG format
- Verify CSS is being applied
- Check you are passing CSS using the
css
parameter
- Partial Transparency
- Look for background colors in child elements
- Check for overlapping elements
- Verify CSS inheritance
Example Fix
/* Before */
body { background: none; } /* This will not work */
/* After */
body { background-color: transparent; } /* This will work */
Performance Tip
PNG files with transparency may be larger than JPGs. Consider using compression if file size is a concern.
Browser Compatibility
Transparent PNGs are supported in all modern browsers:
- Chrome
- Firefox
- Safari
- Edge
- Opera
- Mobile browsers
Need help?
Talk to a human: support@htmlcsstoimage.com. We always respond within 24 hours. And often, even faster.