How to display an image fullscreen on page load

Question

I have the script from previous stack overflow question on how to pick an image from an array at random.

Script to display an image selected at random from an array on page load

I want to take his idea a bit further, and display this image fullscreen on page load. I am working on a website, and had the idea to use an image as a greeting page. Where, when the page loads, you are greeted with a fullscreen HD image. When clicked, this image would disappear and show the full site. I wasn't exactly sure how to accomplish this though. Any ideas?

Edit: I'm not looking for direct implementation. Just general thoughts or jsFiddles on how to accomplish this task.

Answer 1

Try using CSS like,

First option,

img {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

Second option,

img {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

To understand the above options read Perfect Full Page Background Image

I recommend you to use a complete full page background image slider for your problem. If it is available then use it without wasting your time.

I found a full page slider on http://www.freshdesignweb.com/fullscreen-jquery-slider.html in which the first one background slider is best suitable to you.

Also you can go to https://www.google.co.in/?q=full+background+image+slider to get more image sliders

Answer 2

For showing the image on the page load you can use $( document ).ready() function. on click() of the image you could show the website.