Transparent Backgrounds

Create images with transparent backgrounds for logos, overlays, and more

---

Table of contents

• Implementation
• Examples
  • Basic Example
  • Code Example
• Common Use Cases
• Best Practices
  • Do’s
  • Don’ts
• URL-based Screenshots
• Troubleshooting
  • Common Issues
  • Example Fix
• 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;
}

Examples

Basic Example

This image demonstrates a transparent background:

Try it yourself

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

1. Logos: Create logo variations with transparent backgrounds
2. Overlays: Generate images that layer well with other content
3. Icons: Design icons that work on any background
4. 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

1. White Background Appears
   • Ensure you’re using PNG format
   • Verify CSS is being applied
   • Check you are passing CSS using the css parameter
2. 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 */

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.

---