CSS multiple background shows up in Chrome but not IE or Firefox

Question

I see some answers to backgrounds not showing up on Chrome but on IE and Firefox, but that was just refreshing the cache. Tried specifying the conditions for background-size didn't change anything. Not sure why it works on Chrome, but doesn't show up at all in Firefox or IE. Maybe IE can't handle multiple backgrounds, but at the very least I'd like to get it up on Firefox if possible. Any thoughts?

Here is the code:

body{
background-image: url(http://pocketyourpower.com/index.php/admin/cms_wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvYmFja2dSTy5qcGcifX0,/key/5bf910ba704cb793ba25145022f9caa3/), 
    url (http://pocketyourpower.com/index.php/admin/cms_wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvYmFja2dST3JpZ2h0LmpwZyJ9fQ,,/key/5bf910ba704cb793ba25145022f9caa3/);
background-size:93px 99px;
background-repeat: repeat-y, repeat-y;
background-position:left, center right;
}

Shows up fine here.

Not sure why doesn't work on Mozilla or IE.

Could the comma in the url be causing a parse error? Try quoting the url of the image. Also, the images are password protected, so they aren't accessible in the fiddle. — cimmanon, Dec 08 '12 at 19:33

score 1 · Answer 1 · answered Dec 08 '12 at 19:36

1

I don't know what are you doing here, your image url are not pointing to images at all...

Demo

CSS

body {
  background-image: url(http://www.xtec.cat/centres/a8026907/Index/google.jpg), url(http://www.posicionamientoenlaweb.es/wp-content/uploads/2011/03/google.png);
  background-size:93px 99px;
  background-repeat: repeat-y, repeat-y;
  background-position:left, center right;
}

answered Dec 08 '12 at 19:36

Mr. Alien

153,751
34
298
278

Thanks! It's my images, they were pointing to god knows what. After I uploaded them to the ftp site and used that url it worked. – Kevin S. Hsu Dec 08 '12 at 20:15

score 0 · Answer 2 · answered Sep 11 '13 at 09:54

I assume, you are using Magento.

In that case, the solution is to change just one setting in admin :

System -> Configuration -> General -> Content Management -> Use Static URLs for Media Content in WYSIWYG for Catalog to Yes

As Your image URLs were generated by Magento WYSIWYG editor, and the setting above was set to No, you had broken links in the front end.

CSS multiple background shows up in Chrome but not IE or Firefox

2 Answers2