Image in HTML element overflow
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).
There is a cross-browser touch-friendly solution that every front-end developer should know: iScroll by Matteo Spinelli (http://cubiq.org/iscroll-5).
He created a cross-browser simulation of the rubber band effect, that is fully stylable. iScroll can be used for this purpose (as well as many others). I personally use it mostly to create overflow on divs in mobile devices, as they are normally not allowed.
Here is an old-school easter egg using a background image on the #wrapper: http://codepen.io/anon/pen/OXMmgr... JIPPY....JIPPY JIPPY JIPPY!
PS. If you want something that works on 'regular' scroll-wheel scrolling, try this repo: https://github.com/ftlabs/ftscroller
Try this, it may solve your problem (y)
html { background: url(image.png); overflow: hidden; height: 100%;}body { height: 100%; overflow: auto;}