Mobile Safari has limits to what size background images it will display before subsampling, you may be getting hit by this problem because of the size of your background: The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices … Read more
As stated in the documentation of the background property, background-size cannot be set alone and it should be used with background-position. Also inherit and initial aren’t valid values for those properties.
You are using a local path. Is that really what you want? If it is, you need to use the file:/// prefix: file:///H:/media/css/static/img/sprites/buttons-v3-10.png obviously, this will work only on your local computer. Also, in many modern browsers, this works only if the page itself is also on a local file path. Addressing local files from … Read more
Based on the fiddle I posted in the comments I’ve modified it very slightly to use the Bootstrap button CSS. Just include Bootstrap’s CSS file then use the code below. HTML <label for=”check” class=”btn btn-default”>Toggle background colour</label> <input type=”checkbox” id=”check” /> <div></div> CSS div { width: 100%; height: 100%; background: #5CB85C; position: absolute; top: 0; … Read more
You could load the same image using the DOM / a hidden image and bind to the load event on that. The browser’s caching should take care of not loading the image twice, and if the image is already loaded the event should fire immediately… not tested, tough.
I had the same problem and it is annoying. Problem for me was that I could not change the HTML, only the CSS, so I couldn’y remove the additional divs. The problem as I see it is that the backgrounds have “width: 100%” and the container has “width: 900px”. So, for example, if the browser … Read more
background: url(../images/backgroundImage.jpg) no-repeat center center fixed; this should help
<style> { margin: 0; padding: 0; } html { background: url(‘images/yourimage.jpg’) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style>
To make images fade in and out properly, one need to calculate percentages and timings for it to look good, as done below, or simply give each image a @keyframes rule of their own. For “n” images you must define: a=presentation time for one image b=duration for cross fading Total animation-duration is of course t=(a+b)*n … Read more
Re-UPDATE of the UPDATE: Even NEWER Fiddle (without arguments.callee) Changes: Javascript improvements CSS corrections (fits full page now) Added option for random sequence of images instead of sequential => Alternate version of NEWER Fiddle <= (if OP’s img server is down) BIG UPDATE Took the meat of this code from this previous answer and added … Read more