According to Mozilla Developer Network background-size has been supported since Firefox 3.6, however, it is clearly not working in my OS X version of Firefox 5 . It looks fine in Safari, but Firefox 5 is not displaying it correctly. Is there a bug? Why can't I get this to work in Firefox?
HTML:
<span class="special button">My button</span>
CSS:
.button {
background-size: contain;
}
.button.special {
background: url("/images/special-button-bg.png");
}
Here is a jsfiddle which shows that it is not working correctly.
I'm not sure what's going on, but it works if you have:
.button.special {
background: url("/images/special-button-bg.png");
background-size: contain;
}
My guess is that the background
property is overriding the background-size
property. However, that doesn't explain why Firefox is not behaving the same as Safari.
I recently had the same problem with this in the follow scenario: Win10 + Firefox 55.0.3 64its , the background-image not showing
I tested with some other browsers and was ok, I could see the image. eg.: with Win10 + MS Edge and Win10 + IE11 was working correctly
Because I did not want to use JavaScript or Vendor Prefix ( -moz- etc. ) I went to w3c.org trying to search what was wrong, unfortunately I did not found the solution but I decided to try to declare all values:
I changed this:
background-size: contain;
Into this:
background-size: contain contain;
I published and tested, and it's working in the following:
I hope this helps someone which wants to avoid the use of Browser Script languages or vendor prefixes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.