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.

That would include multiple style sheets and and script files. There is simply too much to just post. — Walker, May 04 '15 at 05:21

Rohan Kumar · Answer 1 · 2015-05-04T05:34:47.597

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

Thank you so much for getting back to me. I actually have read the link before, and understand the CSS fairly well. Its the Jquery that I need help with. Its scripting the image to display on page load and then to disappear when clicked. — Walker, May 04 '15 at 05:24
I'm not sure if thats exactly what I'm looking for, but feel free to disagree. — Walker, May 04 '15 at 12:31

score 1 · Answer 2 · answered May 04 '15 at 05:27

1

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

answered May 04 '15 at 05:27

sachin.ph

1,078
12
24

Thats what I've been trying, but from there I'm stuck. Do I try .addClass or .attr? These choices are what's giving me trouble. – Walker May 04 '15 at 05:29
for what. if you have css class then do the `addClass()`. can show the bit of code only used for this. – sachin.ph May 04 '15 at 05:31
Here is a basic jsFiddle where two things arnt working: 1: the orange page wrapper div isn't floating above everything 2: the .click isn't working as intended. http://jsfiddle.net/mc1Lep5c/ – Walker May 04 '15 at 12:29
when using `addClass()` don't specify `. (dot)` in front of class. use only `addClass('page-image')` – sachin.ph May 04 '15 at 13:09
use `$(this).css("background-color", "green");` instead of `addClass('page-image')` – sachin.ph May 04 '15 at 13:11

How to display an image fullscreen on page load

2 Answers2