Search code examples
cssimageipadjpeg

CSS background image does not appear

I have CSS-styled span element with a width and height, and a background-image, which does not appear although a box of the expected size is reserved on-screen.

If I try a different jpg file, the other image then appears successfully. The ‘bad’ image is in the same directory as the .css file, and the same place as the good .jpg. I’ve tried using an online jpg.repair tool in case the file was somehow corrupted, but to no avail.

I have also tried converting the .jpg to a png, remembering to change the file name appropriately in the CSS, luckily. Again no help. Since other images display fine, I’m assuming that it is something to do with the particular file, but the .png didn’t display either.

I’ve tried renaming the file, changing the CSS accordingly, just in case some bug means that the browser (Safari iPadOS) doesn’t like the file name. Desperation unrewarded. The CSS is not somehow bad because the other images do display. The CSS is roughly: background: url("buidheag-in-grass-small.jpg") no-repeat top center; - iirc. The image file is referenced in a separate .css file, not inline in the xhtml. I’m using Safari on an iPad with iPadOS 17.x. The web server engine is Apache/linux. Apache is explicitly set up to serve the correct mime type for .jpg files.

I’m absolutely stumped. I’ve read various other posts, nearly all of which are concerned with problems with incorrect file paths. I only have one directory for all files, so no /img/ or /css/ subdirectories.

Hope someone can help me.

Solution

  • It sounds like the image might have some issues, even though other images work fine. Here are a few things to check:

    • File Issue: Open the image directly in Safari to make sure it’s not corrupted. Try re-exporting it from an editor like Photoshop or GIMP.
    • Cache: Safari might be caching the image. Try clearing the cache or add ?v=1 to the image URL.
    • File Size/Dimensions: Large images might cause issues. Try reducing the file size or dimensions and test again.
    • File Permissions: Make sure the image file has the right permissions (e.g., 644) on your server.
    • MIME Type: Double-check the Apache server is serving the correct MIME type (image/jpeg or image/png).
    • Test on Other Devices: See if the image loads on other browsers or devices to rule out a Safari-specific issue.

    Always put some fiddle link to your question, to get better answer.