Menu
I am currently building a website and I have some trouble while showing it up in Chrome.
When the site is completely loaded, you scroll to some point and hit the refresh button. There will be white squares above the background-image, it looks like the picture in the background doesn´t get loaded completely.
I tried to reproduce this error and it has the same problem. The problem only comes up with Google Chrome
this is my Source Code for the reproduced Site:
<html>
<head>
<style>
body {
background-image: url(http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-royalty-free-photos-images-for-commecial-use-awesome/wallpaper-royalty-free-photo-image-awesome-277.jpg) !important ;
background-repeat:no-repeat; background-attachment:fixed;
}
</style>
</head>
<body>
-- Just pasted some long text from wikipedia here --
</body>
</html>
I also found the same problem on a website while searching the problem: http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
when you scroll to the bottom and hit refresh, the image doesn´t show up 100%. When you start scrolling it instantly loads completely.
EDIT: missing important fact: It seems this error only happens when there is a scrollbar on the site, and you are not refreshing at the top of it.
884
Try this:
<style>
body {
background: url(http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-royalty-free-photos-images-for-commecial-use-awesome/wallpaper-royalty-free-photo-image-awesome-277.jpg) center no-repeat ;
background-size: cover;
-webkit-background-size: cover; //safari chrome
-moz-background-size: cover; // firefox
-o-background-size: cover;
}
</style>
This seems like a problem related to the browser and not your code. But a workaround would be loading the background again with a script.
<script type="text/javascript">
function loadBg() {
document.body.style.backgroundImage="url('backgroundImage.jpg')";
}
</script>
<body onload="loadBg()">
I wouldn't be too concerned about this error though.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With