Load external website on site visit, with floating graphic/text overlay

My goal is to be able to introduce a floating image and/or text over a website that I don't control.

Typing that out, I can understand that this may sound malicious, and as such may not be possible. But I assure you, it's innocent.

As a joke, I would like to direct friends to this new site and, when visited, have it load a friend's website in the background... but with a funny picture or text that would float on the screen over his site. I have purchased the domain name and secured hosting.

Is such a thing possible? Or is there a similar way to do this as some sort of add-on that resides in the browser?

Any suggestions or advice would be appreciated. Thanks in advance!
Who is Participating?
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
Since it is going to your URL anyway, just take a screen shot and use that as a background image and put whatever you need over it.

<div id="friend_site">

Open in new window

goodie069Author Commented:
I'd rather the site still function -- that would be the funny part. As they're browsing his site, the annoying / funny floating thing is bouncing around.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You could simply set up an iframe that takes up the entire page and place your funnything as an absolute positioned object in the center of the page.
<!DOCTYPE html>
  <meta charset="utf-8">
  <title>JS Bin</title>
     position: absolute;
    top: 50%;
    left: 50%;
  <iframe src="http://www.nbcolympics.com/"></iframe>
  <div id="funnything">I am funny</div>

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.