How can I make an image fill the screen and then be able to scroll to another image

Question

I am trying to have an image that fills the screen no matter what size the browser is when you come to the site that I am working on. I then want the user to be able to scroll down the page to either content or another image. A perfect example of what I am trying to do can be seen on this site: http://jackaroocaravans.com/ . Any help is greatly appreciated. I have tried making my have a width and height of 100% and that did not do the trick. I also tried to make my background "cover" and that covered the entire screen but I am not able to scroll.

Looks like that site uses some fancy javaScript. The way it reacts to cursor position, etc, cannot be done in CSS. — Brian Johnson, Dec 04 '14 at 03:49
Ok that is what I was afraid of. Thank you for confirming that! — user3897842, Dec 04 '14 at 03:58
Some of the page uses fancy js, but what you want does not require fancy js. — Christina, Dec 04 '14 at 04:53

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

Except for the parallax on the image in the example, you can use parts from this answer by Roko C. Buljan and the following code to get close.

DEMO: https://jsbin.com/xoxede

enter image description here

jQuery:

The height of the viewport minus the height of the .header is what the size of the #page, #bg, and .splash. See the script.

$(window).on('resize load', function() {

    $('html').removeClass('no-js');
    $('body,html').css('opacity', '1');

    viewportheight = $(window).height();
    headerheight = $('.header').height();
    bg1 = '50';
    bg2 = $('header').height();

    $('.splash, #bg, #page').height(viewportheight) - (headerheight);
    $('.splash.intro, #bg').css({
        'background-position': bg1 + '% ' + bg2 + 'px'
    });

});


var images = [
    "http://121clicks.com/wp-content/uploads/2014/08/rammy_narula_photography_25.jpg",
    "http://ewallpapershub.com/wp-content/gallery/widescreen-wallpapers/widescreen-photography_wallpapers.jpg",
    "http://www.travelklix.com/wp-content/uploads/Amazing-Night-Cities-Photography5.jpg"
];
var $body = $(".intro"),
    $bg = $("#bg"),
    n = images.length,
    c = 0; // Loop Counter

// Preload Array of images...
for (var i = 0; i < n; i++) {
    var tImg = new Image();
    tImg.src = images[i];
}

$body.css({
    backgroundImage: "url(" + images[c] + ")"
});

(function loopBg() {
    $bg.hide().css({
        backgroundImage: "url(" + images[++c % n] + ")"
    }).delay(3000).fadeTo(1200, 1, function() {
        $body.css({
            backgroundImage: "url(" + images[c % n] + ")"
        });
        loopBg();
    });
}());

CSS:

This is demo only CSS. Obviously text and links will not be white.

body,
html {
    margin: 0;
    padding: 0;
    color: #fff;
    font: 100%/300% sans-serif;
}

.no-js body {opacity:0;}

*,
*:before,
*:after {
    box-sizing: border-box
}
a {
    color: #fff
}
.header {
    background: #000;
    padding: 20px;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 3;
}
.splash {
    width: 100%;
    position: relative;
    display: table; /* for vertical alignment */
}
.intro {

}
.about {
    background-color: red
}
.contact {
    background-color: teal
}
.content {
    width: 100%;
    text-align: center;
    font-size: 300%;
    position: relative;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    z-index: 1;
    padding-top: 50px;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 0%; /*removes extra spacing */
}
nav ul li {
    display: inline-block;
    font-size: 16px;
}
nav ul li a {
    padding: 5px
}
footer {
    background: #444;
    padding: 20px;
    clear: both;
}
.splash.intro,
#bg {
    background-color: #000;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#bg,
#page {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
#page{ background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACBJREFUeNpiZGBg6GGAgEUggokBDTACsR6yAIYKgAADAE0GAWM9RhAyAAAAAElFTkSuQmCC);
}

HTML tag

<html class="no-js">

HTML

<header class="header">
   <nav>
      <ul>
         <li><a href="#intro">intro</a></li>
         <li><a href="#about">about</a></li>
         <li><a href="#contact">contact</a></li>
      </ul>
   </nav>
</header>
  
  
<section class="splash intro" id="intro">

  <div class="content">Section 1</div>
  
  <div id="bg"></div>
  <div id="page"></div>

</section>
  
<section class="splash about" id="about">
   <div class="content">Section 2</div>
</section>
  
<section class="splash contact" id="contact">
   <div class="content">Section 3</div>
</section>

How can I make an image fill the screen and then be able to scroll to another image

1 Answers1

DEMO: https://jsbin.com/xoxede