Get a free trial // Grow your CSS skills // Land your dream job

Background image not showing in safari

  • # June 27, 2013 at 9:15 am

    I am working on a responsive design and the class “mid-column” is having a background image but it is not showing on safari on all the devices.

    .mid-column{width:290px; height:500px; padding:0; margin:0 5px 20px 0; float:left; background:#FFFFFF url(../images/box-grdnt.jpg) repeat-x bottom; border:#999999 solid 1px;}

    # June 27, 2013 at 9:42 am

    Do you have a live link?

    # June 27, 2013 at 9:51 am

    No I have no link. I have only codE.

    # June 27, 2013 at 9:53 am

    Perhaps a Codepen?

    # June 27, 2013 at 10:13 am

    [Check this]( “”)

    # June 27, 2013 at 10:16 am

    The image won’t show because it’s not an absolute path. On your Fiddle for example, you just called it as ../images/box-grdnt.jpg so it tries to get — which obviously doesn’t exist, so it won’t show.

    Not saying that’s the problem (cause this would also have the same result in all other browsers, not just Safari), but in your fiddle that’s what’s wrong so we can’t reproduce it.

    # January 25, 2015 at 1:00 pm

    Hi Guys, can you help please ?

    I’ve just finished my new website and testing it in all browsers. It works fine in Chrome, Firefox and IE but in Safari the background images and many other images on the page do not show. This happens on some pages of my site, but not all. I have a Windows OS and the version of Safari is 5.1.7 .

    I have noticed in the code view that one part of the <section id =” aboutArea”> is underlined green on the pages which don’t work properly. If I hover mouse over that green underlined warning bit, the following text appears:

    “If one or more absolute – position elements are placed within a relatively positioned element with no assigned dimensions, either no scroll bar will appear at all, or it will not indent far enough to view all of the content. (Note : this bug will not affect your page if the content in the AP element does not extend beyond the height of view point. Affects: IE 6.0 likelihood: possible.” home page does not show background images in Safari. works OK even in Safari and there is no green underlining of the code.

    Thank you

    # January 25, 2015 at 1:43 pm

    If it ONLY happens in Safari for Windows, is it worth spending time on? That’s a “dead” browser — usage is extremely low, Apple doesn’t even update it anymore.

    If your user stats show that there’s still a lot of Windows users accessing your site using Safari, then you could look into it…but I doubt it.

    Having said that — I went to your site (using Safari), and I wanted to inspect the code to see what could be wrong. However, upon right-clicking, I got this annoying “This image is copyrighted” popup. So much for a quick-and-easy debug, then.

    But I DO see the background images.

    # January 25, 2015 at 2:17 pm

    Hi Senff,

    Thanks for your time.If no one with a Windows OS will use Safari then I can relax. But still hope that genuine Safari users can see my site correctly.

    I just want to explain that the reason why we’ve put the annoying copyrighted image is beause so many other travel companies try to copy our photographs, as well as the words and text on our site.

    Thanks again.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed