You can achieve this result on Safari (I failed to achieve this on other browsers).
HTML
<html>
<body>
<div class="body-wrapper">
Content goes here
</div>
</body>
</html>
CSS
/* --- Reset rubber effect on the 'html' tag --- */
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
/* ------------ end reset ------------ */
html {
background-color: white;
background-image: url("http://www.freebordersandclipart.com/images/EasterEggThree.png");
background-repeat: no-repeat;
background-size: 6%;
background-attachment: fixed;
background-position: 50% 10px;
}
.body-wrapper {
background-color: white;
}
You must remove the default rubber effect on the html element (since you can’t put graphic on the html parent element – there isn’t an html parent).
body has got a rubber effect and transparent background – lack of background is important since the rubber effect expand this colour and can overlap the Easter egg graphic. .body-wrapper has got background colour to hide the Easter egg.
Here you can see the effect (on the desktop it works only on Safari).