Progressive Jpg Background Image Trouble in Firefox

Progressive JPG background image trouble in Firefox

I went digging in since I am working on a similar problem at the moment.

Results from personal tests on this test case + Fiddler 2 to simulate slow modem speed:

                                 as HTML <img>     as CSS background
Firefox (ver 25.0.1)             works             no support
Chrome (ver 32.0.1700.107 m)     works             works
Safari (windows 5.1.7)           no support        no support

Seems to me from the tests (and from an extensive web search) that the only browser that currently supports progressive background images in CSS is Chrome.

Workaround:
A nice workaround I've been using in cases where the image had to be visible before it finished loading the full size, is to load an extremely compressed image under the high resolution image. So you have the compressed graphic under the element until the full resolution graphic loads over it.

<div style="background:url(extremely_compressed.jpg);">
    <div style="background:url(high_quality.jpg);">
    </div>
</div>

Workaround 2:
Since Firefox does support progressive loading on <img> tag, you could try setting the <img> to position:absolute (or fixed) and have it load behind the content with a lower z-index.

Wordaround 3 - CSS3:
Use multiple background images if you don't need to support old browsers.

background-image: url('extremely_compressed.jpg'),url('high_quality.jpg');

firefox 3.x doesn't support background images in Pseudo-classes?

Your page is in quirks mode, presumably, and :hover has some weird behavior in terms of when it applies or not in quirks mode. I suggest putting your web page in standards mode if you want browsers to actually behave compatibly on it, instead of explicitly asking them for buggy backwards-compatible behavior.

Firefox -moz-border-radius won't crop out image?

Does it not crop if you apply the border radius directly to the img element? There are known issues with -moz-border-radius as far as contained content is concerned.

--edit

OK, it doesn't crop img either. If your image is some sort of png/gif on a solid background you may be able to do something like this:

img {
    border: 10px solid white;
    -moz-border-radius: 10px;
}

But if you're trying to get rounded corners on a photo then it's not going to work in 3.5.

Background image not showing in Safari

I converted the image format from jpeg to gif and it worked. So the final CSS is :

.bgMainpage{
    background:url("../images/bg.gif") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}

Does display:none prevent an image from loading?

Browsers are getting smarter. Today your browser (depending on the version) might skip the image loading if it can determine it's not useful.

The image has a display:none style but its size may be read by the script.
Chrome v68.0 does not load images if the parent is hidden.

You may check it there : http://jsfiddle.net/tnk3j08s/

You could also have checked it by looking at the "network" tab of your browser's developer tools.

Note that if the browser is on a small CPU computer, not having to render the image (and layout the page) will make the whole rendering operation faster but I doubt this is something that really makes sense today.

If you want to prevent the image from loading you may simply not add the IMG element to your document (or set the IMG src attribute to "data:" or "about:blank").

How to prevent the white 'flash' on page load created by background image loading delay?

Don't delay loading parts of your site - what if the background image were to have an error in transmission and never arrive? Your scripts would never load.

Instead, if you really dislike the "white" flash, set the background color of the document to a more pleasing color, more in line with your background image. You can do so in the same css style:

body {
    background: #EDEBED url(myGrayBackgroundImage.jpg);
}

It's simple, has virtually no cost, won't break, and won't delay things from downloading unnecessarily. It looks like you're already doing something like this - I wouldn't change it. I don't think anybody has the expectation that your site look a certain way before it loads.

css - how to stretch a background image across the entire window

You can try this

background-size: 100%;

or

background-size:cover

---

Related Topics