How to Insert JPG/PNG Images into HTML Buttons: Fix Image Not Showing & Make the Whole Button an Image

Buttons with images are a staple of modern web design. From social media icons (e.g., Facebook, Twitter) to action buttons (e.g., "Download," "Print," or "Submit"), images in buttons enhance usability by providing visual cues that text alone cannot. However, developers often face two common frustrations: images failing to display (even with correct paths) and buttons not rendering as "pure images" (e.g., unwanted borders, padding, or text cluttering the design).

In this guide, we’ll demystify inserting JPG/PNG images into HTML buttons. We’ll cover:

  • 3 reliable methods to add images to buttons.
  • Troubleshooting steps to fix "image not showing" issues.
  • How to make a button look like a standalone image (no extra borders or text).
  • Styling and accessibility best practices.

By the end, you’ll confidently create sleek, functional image buttons for any project.

Table of Contents#

  1. Basic Methods to Insert Images into HTML Buttons
    • Method 1: <img> Tag Inside <button>
    • Method 2: CSS background-image
    • Method 3: <input type="image">
  2. Why Your Image Isn’t Showing (and How to Fix It)
    • Incorrect File Paths
    • Invalid Image Files or Formats
    • HTML/CSS Syntax Errors
    • CSS Conflicts
    • Server/File Permissions
  3. How to Make the Whole Button an Image
    • Using <img> Inside a Stripped-Down Button
    • Using CSS background-image with No Text
    • Using <input type="image"> for Form Buttons
  4. Styling Tips for Image Buttons
  5. Accessibility Best Practices
  6. Conclusion
  7. References

Basic Methods to Insert Images into HTML Buttons#

Let’s start with the foundational ways to add JPG/PNG images to buttons. Each method has unique use cases, so choose based on whether you need text alongside the image, a background image, or a form-specific button.

Method 1: <img> Tag Inside <button>#

The simplest way to add an image to a button is to nest an <img> tag directly inside a <button> element. This works well when you want text and an image side-by-side (e.g., "Download" with a download icon).

Example Code:#

<button class="image-text-button" onclick="handleClick()">
  <img src="download-icon.jpg" alt="Download icon" width="24" height="24">  
  Download File  
</button>

Key Attributes:#

  • src: Path to your JPG/PNG image (required).
  • alt: Descriptive text for screen readers (critical for accessibility).
  • width/height: Optional, but recommended to prevent layout shifts.

When to Use:#

  • You want text and an image in the button (e.g., "Like" with a heart icon).
  • The image is a small icon (not the primary button visual).

Method 2: CSS background-image#

For images that act as a background (e.g., a gradient or pattern behind text), use CSS’s background-image property on the button. This gives you control over image scaling, positioning, and repetition.

Example Code:#

<button class="background-image-button">Submit</button>
 
<style>
.background-image-button {
  background-image: url("submit-bg.png"); /* Path to your image */
  background-size: cover; /* Scale image to cover the button */
  background-repeat: no-repeat; /* Prevent tiling */
  background-position: center; /* Center the image */
  color: white; /* Text color (if overlaying text) */
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

Key CSS Properties:#

  • background-size: Use cover (fill button, crop if needed) or contain (fit image without cropping).
  • background-position: Adjust with center, top left, or pixel values (e.g., 50% 50%).
  • background-repeat: Set to no-repeat to avoid tiling small images.

When to Use:#

  • The image is a background (e.g., a textured button with text overlay).
  • You need precise control over image scaling/positioning.

Method 3: <input type="image">#

If you’re working with forms, <input type="image"> creates a button that submits the form when clicked. It replaces the default submit button with your image.

Example Code:#

<form action="/submit" method="POST">
  <!-- Other form fields -->
  <input 
    type="image" 
    src="submit-button.png" 
    alt="Submit form" 
    width="150" 
    height="50"
  >
</form>

How It Works:#

  • Behaves like a <button type="submit"> but uses your image as the visual.
  • Submits x and y coordinates of the click (rarely needed, but part of the spec).

When to Use:#

  • Form submission buttons (e.g., "Submit" or "Search" buttons in forms).

Why Your Image Isn’t Showing (and How to Fix It)#

Even with the methods above, images often fail to render. Let’s troubleshoot the most common issues.

1. Incorrect File Paths#

Problem: The src (for <img>) or url() (for CSS background-image) points to the wrong location.

How to Fix:

  • Use relative paths for local images (e.g., images/icon.jpg if the image is in an images folder).
    • ./icon.jpg: Image is in the same folder as your HTML file.
    • ../icons/icon.png: Image is in a folder one level above your HTML file.
  • Use absolute paths for external images (e.g., https://example.com/icons/share.png).
  • Debug with browser dev tools: Right-click the button → "Inspect" → Check the "Network" tab for 404 errors (red entries indicate missing files).

2. Invalid Image Files or Formats#

Problem: The image file is corrupted, or the format isn’t supported (e.g., a .txt file renamed to .jpg).

How to Fix:

  • Verify the image opens in an image viewer (e.g., Preview, Paint).
  • Ensure the file extension matches the format (JPG/PNG are universally supported; avoid WebP if targeting older browsers).
  • Re-export the image from editing software (Photoshop, GIMP) to regenerate a valid file.

3. HTML/CSS Syntax Errors#

Problem: Typos in src, missing quotes, or invalid CSS properties.

Common Mistakes:

  • Forgetting quotes around src or url():
    ❌ src=download.jpg (missing quotes)
    ❌ background-image: url(icon.png) (quotes are optional but recommended for clarity).
  • Misspelling background-image (e.g., backround-image).

How to Fix:

4. CSS Conflicts#

Problem: Other CSS rules override your image (e.g., a background-color covering the image, or padding pushing the image out of view).

Example Conflict:

/* Accidental override! */
button {
  background-color: blue; /* Covers the background image */
  padding: 20px; /* May push a small <img> out of view */
}

How to Fix:

  • Use browser dev tools to inspect the button: Go to "Elements" → "Styles" tab. Look for crossed-out background-image or src properties (indicates overrides).
  • Add !important temporarily to test (use sparingly!): 
    .background-image-button {
  background-image: url("submit-bg.png") !important; 
  background-color: transparent !important; /* Remove conflicting color */
}

5. Server/File Permissions#

Problem: The server blocks access to the image file (common on Linux servers with strict permissions).

How to Fix:

  • Check file permissions: Images should be readable by the server (e.g., chmod 644 for Linux/macOS).
  • Contact your hosting provider if permissions can’t be adjusted.

How to Make the Whole Button an Image#

Sometimes, you want the button to look like nothing but the image (no borders, text, or extra space). Here’s how to achieve that.

Using <img> Inside a Stripped-Down Button#

Remove all borders, padding, and background from the <button>, leaving only the <img> visible.

Example Code:#

<button class="image-only-button" onclick="handleAction()">
  <img src="share-icon.png" alt="Share" width="40" height="40">
</button>
 
<style>
.image-only-button {
  border: none; /* Remove default border */
  padding: 0; /* Remove internal spacing */
  background: transparent; /* Remove default background */
  cursor: pointer; /* Keep pointer cursor (critical for UX) */
}
 
/* Optional: Add hover effect */
.image-only-button:hover {
  opacity: 0.8; /* Slight fade on hover */
}
</style>

Result:#

A button that looks exactly like the image (no extra space or borders).

Using CSS background-image with No Text#

If you don’t need text, use background-image and size the button to match the image dimensions.

Example Code:#

<button class="pure-image-button" aria-label="Delete item"></button>
 
<style>
.pure-image-button {
  width: 50px; /* Match image width */
  height: 50px; /* Match image height */
  border: none;
  padding: 0;
  background: url("delete-icon.png") center/cover no-repeat; /* Shorthand for background properties */
  cursor: pointer;
}
</style>

Key Shorthand:#

background: url("image.png") center/cover no-repeat is shorthand for:

  • background-image: url("image.png")
  • background-position: center
  • background-size: cover
  • background-repeat: no-repeat

Using <input type="image"> for Form Buttons#

For form submission buttons, <input type="image"> natively acts as a "pure image" button (no extra styling by default).

Example Code:#

<form>
  <input 
    type="image" 
    src="submit-icon.png" 
    alt="Submit" 
    width="60" 
    height="60"
    class="form-image-button"
  >
</form>
 
<style>
.form-image-button {
  border: none; /* Remove default input border (some browsers add it) */
}
</style>

Styling Tips for Image Buttons#

Elevate your image buttons with these pro styling tricks:

  • Hover Effects: Add transitions for interactivity:

    .image-button {
  transition: transform 0.2s ease;
}
.image-button:hover {
  transform: scale(1.05); /* Slight zoom on hover */
}

  • Responsive Sizing: Use max-width: 100% to make images scale with the button:

    .image-only-button img {
  max-width: 100%;
  height: auto; /* Maintain aspect ratio */
}

  • Rounded Corners: Use border-radius to match your design system:

    .image-button {
  border-radius: 8px; /* Soft corners */
  overflow: hidden; /* Clip image to rounded corners */
}

Accessibility Best Practices#

Images in buttons must be usable for everyone, including screen reader users.

1. Always Use alt Text#

For <img> tags inside buttons, alt describes the image’s purpose (not its appearance):

<!-- Good: Describes action -->
<img src="trash.png" alt="Delete"> 
 
<!-- Bad: Describes appearance -->
<img src="trash.png" alt="Trash can icon">

2. Use aria-label for Buttons Without Text#

If the button has no visible text (e.g., a pure image button), use aria-label to describe its action:

<button aria-label="Upload file" class="upload-button"></button>

3. Ensure Focus Visibility#

Keyboard users rely on focus indicators. Never remove outline without replacing it:

.image-button:focus {
  outline: 2px solid #005FCC; /* Custom focus ring */
  outline-offset: 2px;
}

Conclusion#

Inserting JPG/PNG images into HTML buttons is straightforward once you master the basics: nesting <img> tags, using CSS background-image, or leveraging <input type="image">. To fix "image not showing" issues, check file paths, syntax, and CSS conflicts. For a "pure image" button, strip borders/padding and size the button to match the image. Always prioritize accessibility with alt text and aria-label.

With these techniques, you’ll create polished, functional image buttons that enhance your UI.

References#

2026-02