Image in HTML element overflow

Question

Chrome and other browsers have overscroll (also called elastic scroll, or rubber band scroll) for the html element. (See here or here.)

I want an image in the html overscroll as an Easter egg, a bit like the Slack for iOS Easter egg. (See "You are up to date." in the screenshot.)

The CSS

html {
    background: green;
}

gives the overflow a color. An image does not work:

html {
    background: url(image.png);
}

How can I put an image in the html overflow?

No can you just provide html code with sample image, like how you are requesting from others? so that I can try over there thank you — Sudarshan Kalebere, May 30 '16 at 09:37

score 12 · Answer 1 · edited Aug 28 '16 at 20:02

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).

background-attachment: fixed; used to make it work in older versions of chrome and/or firefox as well as safari. The effect was removed quite some time ago. where even the html background scrolls when "rubber-banding". — , May 25 '16 at 00:11
This can easily be achieved in ANY browser, using iScroll: http://stackoverflow.com/a/37734326/2397550 — Mr. Hugo, Jun 09 '16 at 19:13

Mr. Hugo · Answer 2 · 2016-06-12T15:42:25.427

5

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

edited Jun 12 '16 at 15:42

answered Jun 09 '16 at 19:09

Mr. Hugo

11,887
3
42
60

1

I'm on Chrome for Mac and your codepen doesn't work for me. – Randomblue Jun 10 '16 at 10:08
Try the original demo... :-) – Mr. Hugo Jun 10 '16 at 10:37
1

If you're referring to http://lab.cubiq.org/iscroll5/demos/simple/, then it also doesn't work. – Randomblue Jun 10 '16 at 10:42
Matteo does not agree: "Out of the box multi-platform support. From older Android devices to the latest iPhone, from Chrome to Internet Explorer." – Mr. Hugo Jun 10 '16 at 10:49
1

There's no over-scrolling whatsoever. – Randomblue Jun 10 '16 at 12:24
Did you grab and pull it? – Mr. Hugo Jun 10 '16 at 12:31
1

Man, I used the demo link lab.cubiq.org/iscroll5/demos/simple, as explained above – Randomblue Jun 10 '16 at 12:40
1

Did you click the mouse and dragged it up? Just jank as hard as you can... – Mr. Hugo Jun 10 '16 at 12:45
2

OK, with the mouse it works! However, I am expecting the over-scroll to work with just the trackpad and two-finger swipe. – Randomblue Jun 10 '16 at 13:04
I see what you mean. found that here: https://github.com/ftlabs/ftscroller. You might want to tweak the animations though... – Mr. Hugo Jun 11 '16 at 23:25

score 2 · Answer 3 · edited Jun 28 '16 at 10:20

2

Try this, it may solve your problem (y)

html {
    background: url(image.png);
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}

edited Jun 28 '16 at 10:20

Sagar Kodte

3,723
4
23
52

answered May 26 '16 at 04:07

Vishnu S Babu

1,570
1
12
23

1

It doesn't work for me. Can you share a live example? What browser do you use? – Randomblue May 30 '16 at 16:29
1

@VishnuSBabu If I press *Run code snippet* in Chrome, nothing happens. – Karlo Jun 13 '16 at 16:12

score 1 · Answer 4 · answered May 30 '16 at 07:33

1

This might work, did for me:

body {
    background: white;
    height: 100%;
    overflow: auto;
}

html {
    overflow: hidden;
    height: 100%;
    background: url("http://www.planwallpaper.com/static/images/background-wallpapers-26.jpg");
}

answered May 30 '16 at 07:33

Sampada

2,931
7
27
39

2

What browser do you use? Can you provide a live example? – Randomblue May 30 '16 at 08:30
Firefox. Also tried with Chrome successfully. Don't really have a live example, but here's a fiddle - https://jsfiddle.net/sampada07/w9t0d3uj/ – Sampada May 30 '16 at 09:24
2

I use Chrome on Mac OS X and it doesn't work for me. I also tried Firefox and it doesn't work for me. – Randomblue May 30 '16 at 15:30

score 0 · Answer 5 · edited Aug 28 '16 at 20:06

Perhaps you should try this:

html {
   background-color: 'yourcolor';
}

html {
   background-image: 'your image';
}

because when you, use background property you are overwriting what you wrote previously. It will give a default value almost for all of the background properties. It would be an easy way to set your background-image and background-color separately, but for other behaviors like repeat, position, attachment, and etc, please leave a comment so I would know what else is your problem.

Second part

I have built this pen for you, -> http://codepen.io/CodeHero/pen/PzZdZW Well, I build a box in there and gave it a few background propertys and overwrote all of it by using background : blue;.

It's a simple sample, but you can make sure by doing the following steps. You can right click on the blue box and chose the option inspect element, and it will open an inspect menu for you which you can see the css part on the right side of it, and if you look closely you can see it crossed a line on the first css selector property and it's because I used background instead of background-color.

Your proof-of-concept doesn't work for me on Chrome for Mac OS X. — Randomblue, Jun 13 '16 at 20:56

score 0 · Answer 6 · answered Jun 13 '16 at 11:31

0

You don't need to manually create it as there are lot of js plugins already doing this job. What is best library for this i think is Overall.Js

Here is the link https://github.com/tholman/overscroll

I am pretty sure, This is what you were looking.

answered Jun 13 '16 at 11:31

Siraj Hussain

874
9
25

score 0 · Answer 7 · edited Jun 20 '20 at 09:12

I did some modifications to Everettss's code so that it will work in all browsers.

I used background-clip: content-box to limit the background color to content itself, instead of affecting the padding. Here is the code:

Scroll on top to see the image

var body = document.querySelector('.body-wrapper');
body.addEventListener('scroll', function(e){
  var scrollTop = this.scrollTop;
  if(scrollTop === 0){
    this.style.paddingTop = "50px";
    this.style.height = "calc(100% - 50px)";
    setTimeout(function(){
      this.style.paddingTop = "0px";
    }.bind(this), 700);
    this.style.height = "";
  }
  else{
    this.style.paddingTop = "0px";
    this.style.height = "";
  }

})

/* --- reset rubber effect on html --- */
html {
  overflow: hidden;
  height: 100%;
}

body {
  height: 100%;
  overflow: hidden;
}
/* ------------ 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-image: linear-gradient(white, white);
  background-clip: content-box;
  background-attachment: scroll;
  height: 100%;
  transition: padding .7s linear, height .7s linear;
  overflow: auto;
}

<div class="body-wrapper">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, architecto consectetur cupiditate deserunt dolor dolorem dolores in itaque modi odio, ratione suscipit voluptatem. Accusamus alias corporis debitis veniam vero voluptatem.</span><span>Eligendi in magni quod reiciendis rerum! Aut corporis nihil nostrum reiciendis saepe. Accusamus commodi dolores neque officia omnis pariatur sequi suscipit ullam veritatis! Ab, adipisci earum facere fuga temporibus voluptates?</span><span>Amet, doloremque, quo! Autem harum illo iusto. Blanditiis commodi, consectetur cupiditate delectus dolore, eveniet facere natus necessitatibus nemo numquam quidem reprehenderit repudiandae veniam. Aperiam dolores eaque ipsam quisquam reiciendis, vel.</span><span>A ab at atque blanditiis cupiditate eaque eligendi est fugit illo inventore laborum maiores minima molestiae nihil non quaerat, quam quasi qui rem rerum sint sit unde veniam vitae voluptatum!</span><span>Ad ea molestias perspiciatis repellat. Accusamus adipisci aliquid animi aspernatur doloremque ducimus et excepturi expedita facilis, id libero modi molestiae omnis quibusdam quisquam, repellat sequi similique veniam vero voluptatibus voluptatum.</span><span>Alias aliquid amet aspernatur blanditiis culpa cumque dolorum earum eligendi et explicabo illum ipsa iure labore minima natus nemo optio, possimus, praesentium quam quibusdam quisquam quos sunt suscipit unde velit?</span><span>Cumque earum facilis ipsa odio officiis reiciendis tenetur. Aliquid debitis dolor facere fugit, incidunt, ipsa ipsum nemo nihil nisi omnis optio perspiciatis, quisquam repellat sapiente similique temporibus ut veritatis voluptas?</span><span>Architecto, labore, nostrum! Aliquam aliquid animi cumque ea eaque eveniet ipsa iste laudantium magni maiores molestias mollitia nemo nulla obcaecati, omnis optio placeat porro possimus ratione rem vel, voluptate voluptates.</span><span>Ad aperiam architecto asperiores assumenda aut beatae consequuntur corporis delectus deleniti dolor doloremque eius eos eum exercitationem harum iusto molestias nesciunt nulla omnis, praesentium quam quas quidem quisquam soluta, veniam!</span><span>Atque blanditiis debitis error est expedita minima molestias nam officia veniam, voluptates. A ipsum mollitia quibusdam rerum tempora. Cum deleniti fugit itaque maiores minima nisi obcaecati possimus quidem sit voluptatem.</span>
   <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, architecto consectetur cupiditate deserunt dolor dolorem dolores in itaque modi odio, ratione suscipit voluptatem. Accusamus alias corporis debitis veniam vero voluptatem.</span><span>Eligendi in magni quod reiciendis rerum! Aut corporis nihil nostrum reiciendis saepe. Accusamus commodi dolores neque officia omnis pariatur sequi suscipit ullam veritatis! Ab, adipisci earum facere fuga temporibus voluptates?</span><span>Amet, doloremque, quo! Autem harum illo iusto. Blanditiis commodi, consectetur cupiditate delectus dolore, eveniet facere natus necessitatibus nemo numquam quidem reprehenderit repudiandae veniam. Aperiam dolores eaque ipsam quisquam reiciendis, vel.</span><span>A ab at atque blanditiis cupiditate eaque eligendi est fugit illo inventore laborum maiores minima molestiae nihil non quaerat, quam quasi qui rem rerum sint sit unde veniam vitae voluptatum!</span><span>Ad ea molestias perspiciatis repellat. Accusamus adipisci aliquid animi aspernatur doloremque ducimus et excepturi expedita facilis, id libero modi molestiae omnis quibusdam quisquam, repellat sequi similique veniam vero voluptatibus voluptatum.</span><span>Alias aliquid amet aspernatur blanditiis culpa cumque dolorum earum eligendi et explicabo illum ipsa iure labore minima natus nemo optio, possimus, praesentium quam quibusdam quisquam quos sunt suscipit unde velit?</span><span>Cumque earum facilis ipsa odio officiis reiciendis tenetur. Aliquid debitis dolor facere fugit, incidunt, ipsa ipsum nemo nihil nisi omnis optio perspiciatis, quisquam repellat sapiente similique temporibus ut veritatis voluptas?</span><span>Architecto, labore, nostrum! Aliquam aliquid animi cumque ea eaque eveniet ipsa iste laudantium magni maiores molestias mollitia nemo nulla obcaecati, omnis optio placeat porro possimus ratione rem vel, voluptate voluptates.</span><span>Ad aperiam architecto asperiores assumenda aut beatae consequuntur corporis delectus deleniti dolor doloremque eius eos eum exercitationem harum iusto molestias nesciunt nulla omnis, praesentium quam quas quidem quisquam soluta, veniam!</span><span>Atque blanditiis debitis error est expedita minima molestias nam officia veniam, voluptates. A ipsum mollitia quibusdam rerum tempora. Cum deleniti fugit itaque maiores minima nisi obcaecati possimus quidem sit voluptatem.</span>
</div>

The changes which I did are:

Applied overflow: auto to the .body-wrapper.
Applied overflow: hidden to the body element.
Used background-image and gradient instead of background-color to clip the color to content only (without affecting the padding)

With small tweaks, you can make it perfect.

Working Fiddle

clickbait · Answer 8 · 2018-08-14T20:59:30.857

WARNING: THE CODE SNIPPET DOES NOT WORK. USE THE CODE IN A REGULAR HTML PAGE TO MAKE IT WORK.

You don't need to modify your HTML at all. Just position a pseudo element below the page.

body {
    height: 3000px;
    position: relative;
    overflow: visible;
}
body::after {
    display: block;
    background-image: url(//getuikit.com/docs/images/placeholder_200x100.svg); /* Placeholder image */
    position: absolute;
    top: 100%;

    left: 50%; /* Centers image horizontally */
    margin-left: -100px; /* Half the width */

    width: 200px; /* Any width you need */
    height: 100px; /* Any height you need */
}

body {
  height: 3000px;
  position: relative;
  overflow: visible;
}
body::after {
  display: block;
  background-image: url(//placeholdit.imgix.net/~text?txtsize=19&bg=000080&txtclr=ccccff&txt=200×100&w=200&h=100); /* Placeholder image */
  position: absolute;
  top: 100%;

  left: 50%; /* Centers image horizontally */
  margin-left: -100px; /* Half the width */

  width: 200px; /* Any width you need */
  height: 100px; /* Any height you need */
}

<html>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia elit augue, quis congue velit lacinia eget. Curabitur nec congue nunc. Sed sit amet molestie mauris. Duis in urna imperdiet, placerat purus a, rutrum nulla. Morbi congue ante a iaculis fermentum. Integer ornare consequat risus, sed venenatis est sodales quis. Sed finibus nulla velit, nec varius ex aliquet ac. Nulla enim lectus, euismod nec mi in, pretium sollicitudin nibh. Nunc ex leo, congue ac elit eu, dapibus fermentum dolor. Fusce sit amet viverra orci, et pharetra purus. In gravida, leo et consequat tristique, arcu arcu suscipit justo, at suscipit libero leo vitae massa.

In tincidunt condimentum odio non pharetra. Morbi sit amet purus vel nibh feugiat tincidunt. Phasellus commodo libero non arcu dictum, ut consectetur dolor dictum. Maecenas rutrum dolor ac rhoncus imperdiet. Vivamus in augue eu ante vehicula ornare quis et erat. Nullam nec aliquet nulla. Suspendisse non turpis in orci blandit viverra.

Morbi hendrerit, odio ut efficitur ultricies, orci nisi pretium tellus, a rutrum turpis felis a mi. Sed pellentesque blandit mauris, nec tristique ipsum rhoncus ullamcorper. Mauris efficitur feugiat dignissim. Aenean faucibus erat ut commodo malesuada. Curabitur tempor diam vitae hendrerit tincidunt. Morbi sit amet augue turpis. Aenean nec egestas sem. Quisque lacinia semper magna, id consequat augue eleifend id. Phasellus tincidunt euismod dui, id vestibulum lorem eleifend et. Integer hendrerit turpis sed ante vulputate, non malesuada neque consectetur. Cras dui felis, posuere ac risus non, tincidunt molestie sem. Duis consectetur ultricies enim, eu lacinia metus rhoncus a. Quisque accumsan porta lectus sit amet tempor. In imperdiet dapibus risus et placerat. Etiam pretium magna urna, quis egestas mauris tincidunt non.

Mauris egestas vel augue vitae interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel odio orci. Duis quis magna ante. Suspendisse a eros et lacus dignissim lobortis quis nec mi. Pellentesque non egestas metus, vel efficitur nisi. Phasellus a nunc in eros tristique commodo sit amet nec dolor. Donec blandit magna sit amet mauris dictum congue. Fusce tempus, turpis non congue pulvinar, risus dui mattis metus, eget malesuada ex lectus non nibh. In finibus lacus eu sem accumsan, viverra pharetra justo euismod. Morbi mollis molestie felis quis elementum. Proin eget eros nec felis faucibus ullamcorper. Curabitur dapibus augue sed leo blandit, sit amet tempus lorem imperdiet. Suspendisse pellentesque sapien vitae velit bibendum, eget fringilla urna suscipit.

Praesent in tellus quis arcu porta lobortis. Sed nulla metus, sodales eget iaculis eget, facilisis sit amet nulla. Mauris sagittis metus quis lectus dictum accumsan. Donec consectetur dui eget enim suscipit, ac porttitor urna ultrices. Phasellus tempor pharetra magna, sit amet malesuada lectus rutrum ultricies. Nam imperdiet vestibulum diam, a ullamcorper purus volutpat nec. Aenean pharetra ullamcorper suscipit. Donec molestie lobortis facilisis. Vivamus laoreet dapibus placerat. Duis luctus ligula felis, vitae eleifend turpis maximus a. Aliquam fringilla elit maximus diam sagittis volutpat. Vestibulum erat magna, commodo a tortor vel, efficitur aliquet ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus iaculis hendrerit mollis. Vestibulum vitae ante vel velit ultricies efficitur. Duis tincidunt semper consectetur.
    <h1>Keep scrolling down!</h1>
  </body>
</html>

Warning: not all browsers will allow you to over-scroll within the code snippet window.

Doesn't work for me on Chrome for Mac. Which browsers does this work in? — Randomblue, Jun 05 '16 at 23:09

Image in HTML element overflow

8 Answers8

HTML

CSS

Second part

Scroll on top to see the image

WARNING: THE CODE SNIPPET DOES NOT WORK. USE THE CODE IN A REGULAR HTML PAGE TO MAKE IT WORK.