CODEWITHSUNDEEP
javascriptjqueryhtmlcss
nicholas79171
nicholas79171

Reputation: 1273

Multiple background images, one cover the other

My ultimate goal is to have a webpage that looks something like this. Here is what I currently have.

My question is how to get the background to stick so that when the user scrolls, the rest of the text covers up the image. I saw this post and tried to play around with background-attachment: fixed but couldn't get anything to work, mainly because I have two backgrounds I'd like to use: the main picture (the kitten), and the texture I use for the background. I'm open to JavaScript or JQuery solutions if that's what it takes since I'm already using it for other features.

Here's the HTML:

    <div id='cssmenu'>
    <ul>
       <li id="menu-one" class="active"><a href="#"><span>Home</span></a></li>
       <li id="menu-two"><a href="#"><span>Wedding Info</span></a></li>
       <li id="menu-three"><a href="#"><span>Direcitions</span></a></li>
       <li id="menu-four"><a href="#"><span>Registry</span></a></li>
       <li id="menu-five" class='last'><a href="#"><span>RSVP</span></a></li>
    </ul>
    </div>

    <div class="before_content"></div>

    <div id="item-one">

        <!--<h2 class="names" name='top'>Bob + Suzy</h2>-->

        <img src="http://placekitten.com/g/1000/400" alt="Snow" class="background">

    </div>

    <div id="item-two">
        <h3 class="date">Wedding Info</h3>
        <p>Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.</p>
    </div>

    <div id="item-three">  
        <h3 class="date">Directions</h3>
        <p>Paragraph 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.</p>
    </div>

    <div id="item-four">
        <h3 class="date">Registry</h3>
        <p>Paragraph 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.</p>
    </div>

    <div id="item-five">
        <h3 class="date">RSVP</h3>
        <p>Paragraph 4: Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.</p>     
    </div>              

    <footer>
        <a href="#">Some footer text</a>
    </footer>

    <script language="javascript" type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/scroll.js"></script>

</body>

CSS:

@font-face {
    font-family: 'Abraham Lincoln';
    src: url(../fonts/Abraham-Lincoln/AbrahamLincoln.ttf);
}

@font-face {
    font-family: 'Ingleby';
    src: url(../fonts/Ingleby/Ingleby_regular);
}

body {
  font-family: 'Ingleby';
  background-image: url(../Images/background.jpg);
  background-repeat: repeat;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.clearfix:after {
    display: block;
    clear: both;
}

h2.names {
    font-size: 36px;
    text-align: center;
    font-family: 'Abraham Lincoln';
}

h3.date {
    font-size: 28px;
    text-align: center;
    font-family: 'Abraham Lincoln';
}

h4 {
    font-size: 20px;
    text-align: center;
    font-family: 'Abraham Lincoln';
}

p {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
}

.background {
    width: 100%;
  background-attachment: fixed;
    display: block;
    margin: 0px auto;
    margin-top: 0px;
}

footer {
    text-align: right;
    font-size: 12px;
    height: 30px;
    background-color: rgb(59, 58, 76);
    width: 100%;
    padding-top: 5px;
    padding-bottom: 10px;
}

footer a {
    text-align: right;
    text-decoration: none;
    display: block;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    color: black;
    font-size: 12px;
    padding-top: 12px;
}

footer a:hover {
    text-decoration: underline;
}

#map-canvas {
    height: 50%;
    margin-top: 200px;
    padding: 200px;
}

/* ------------ */
/*   PICTURES   */
/* ------------ */

.wrapper {
    width: 720px;
    margin: 0px auto;
    display: block;
}

.grow { 
    -webkit-transition: all .2s ease-in-out; /* Safari and Chrome */
    -moz-transition: all .2s ease-in-out; /* Firefox */
    -ms-transition: all .2s ease-in-out; /* IE 9 */
    -o-transition: all .2s ease-in-out; /* Opera */
    transition: all .2s ease-in-out; 
    margin: 20px;
}
.grow:hover { 
    -webkit-transform: scale(1.1); /* Safari and Chrome */
    -moz-transform: scale(1.1); /* Firefox */
    -ms-transform: scale(1.1); /* IE 9 */
    -o-transform: scale(1.1);
    transform: scale(1.1); 
    z-index: -100;
}

/* ------------ */
/*   NEW MENU   */
/* ------------ */

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
  font-size: 14px;
}

ul {
    text-align: center;

}
#cssmenu {
  line-height: 1;
  background: rgb(43, 41, 59)   ;
  /*
  background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
  background: -o-linear-gradient(top, #333333 0%, #141414 100%);
  background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
  background: linear-gradient(to bottom, #333333 0%, #141414 100%); */
  border-bottom: 5px solid rgb(117, 144,    112 );
  width: auto;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  /*
  background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
  background: -o-linear-gradient(top, #333333 0%, #141414 100%);
  background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
  background: linear-gradient(to bottom, #333333 0%, #141414 100%);
  */
  color: white;
  display: block;
  font-family: "Ingleby";
  font-size: 50px;
  padding: 19px 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul > li {
  display: inline-block;
  margin: 0;
}
#cssmenu.align-center {
  text-align: center;
}
#cssmenu.align-center > ul > li {
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul {
  float: right;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li > a {
  color: #ffffff;
  font-size: 12px;
  transition: background-color 0.5s ease;
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgb(117,    144,    112 );
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  /*
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  */
}
#cssmenu.align-right > ul > li:first-child > a,
#cssmenu.align-center > ul > li:first-child > a {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}
#cssmenu.align-right > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a {
  color: white;
  /*
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  */
  background: #403D57;
  /*
  background: -moz-linear-gradient(top, #262626 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);
  background: -o-linear-gradient(top, #262626 0%, #070707 100%);
  background: -ms-linear-gradient(top, #262626 0%, #070707 100%);
  background: linear-gradient(to bottom, #262626 0%, #070707 100%);
  */
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu.align-right .has-sub ul {
  left: auto;
  right: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #31b7f1;
  font-size: 11px;
  filter: none;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
  background: #0c7fb0;
}
#cssmenu ul ul li:hover > a {
  color: #ffffff;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
  left: auto;
  right: 100%;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #31b7f1;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #0a6d98;
}
#cssmenu ul ul li.last > a,
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul ul li.last > a,
#cssmenu ul ul ul li:last-child > a,
#cssmenu .has-sub ul li:last-child > a,
#cssmenu .has-sub ul li.last > a {
  border-bottom: 0;
}

/* Make menu bar stay at top */

#cssmenu {
    position: fixed;
    top: 0;
    width: 100%;
}

h2 {
    margin-top: 75px; 
}

JavaScript:

$(document).ready(function(){

    var itemFour = $("#item-four");
    var position = itemFour.offset();

    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= $("#item-five").offset().top - 75) {
            $("li").removeClass('active');
            $("#menu-five").addClass('active');
        } else if (scroll >= $("#item-four").offset().top - 75) {
            $("li").removeClass('active');
            $("#menu-four").addClass('active');
        } else if (scroll >= $("#item-three").offset().top - 75) {
            $("li").removeClass('active');
            $("#menu-three").addClass('active');
        } else if (scroll >= $("#item-two").offset().top - 75) {
            $("li").removeClass('active');
            $("#menu-two").addClass('active');
        } else {
            $("li").removeClass('active');
            $("#menu-one").addClass('active');
        }
    });

    $("#menu-one").click(function() {
        $('html, body').animate({
            scrollTop: $("#item-one").offset().top - 74
        }, 'slow');
        $("li").removeClass('active');
        $(this).addClass('active');
    });

    $("#menu-two").click(function() {
        $('html, body').animate({
            scrollTop: $("#item-two").offset().top - 74
        }, 'slow');
        $("li").removeClass('active');
        $(this).addClass('active');
    });

    $("#menu-three").click(function() {
        $('html, body').animate({
            scrollTop: $("#item-three").offset().top - 74
        }, 'slow');
        $("li").removeClass('active');
        $(this).addClass('active');
    }); 

    $("#menu-four").click(function() {
        $('html, body').animate({
            scrollTop: $("#item-four").offset().top - 74
        }, 'slow');
        $("li").removeClass('active');
        $(this).addClass('active');
    });

    $("#menu-five").click(function() {
        $('html, body').animate({
            scrollTop: $("#item-five").offset().top - 74
        }, 'slow');
        $("li").removeClass('active');
        $(this).addClass('active');
    });

});

Upvotes: 1

Views: 102

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206102

basically:

<div class="imageCover" style="background-image:url(http://placekitten.com/1000/400)"></div>

CSS:

.imageCover{
  height:500px;
  background: none 50% / cover fixed;
}

Regarding your jQuery, this is all you need:

$(function(){

    var $menuLi = $("[id^=menu-]");
    var $itemEl = $("[id^=item-]");

    $(window).on("scroll resize", function() { // check also on resize!
        var scroll = $(window).scrollTop();
        var currId = $itemEl.filter(function(i, e){ // Filter items
          return $(e).offset().top >= scroll - 75;  // retrieve a match
        })[0].id.split("-")[1];                     // get it's suffix (i.e: "two")
        $("#menu-"+currId).addClass("active").siblings().removeClass("active");
    });

    $menuLi.click(function() {
        var num = this.id.split("-")[1]; // get "one", "two"...
        var y   = $("#item-"+ num).offset().top-74;
        $('html, body').animate({scrollTop: y }, 'slow');
    });

});

A better approach using #href to #id

jsBin demo

Hash-Link the Menu A HREF to the desired article ID elements like:

<nav>
    <ul id="menu">
      <li><a href="#home" class="active">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

<div class="imageCover" style="background-image:url(image1.jpg)"></div>
<article id="home"><h1>Home</h1><p>Content</p></article>

<div class="imageCover" style="background-image:url(image2.jpg)"></div>
<article id="home"><h1>About</h1><p>Content</p></article>

<div class="imageCover" style="background-image:url(image3.jpg)"></div>
<article id="home"><h1>Contact</h1><p>Content</p></article>

where i.e. the hash href="#about" relates to the id="about" article.

CSS:

nav{
  background: hsla(0, 0%, 100%, 0.9);
  position:fixed;
  width:100%;
  box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.4);
}
#menu li, #menu a{
  display: inline-block;
}
#menu  a{
  padding: 15px 25px;
  text-decoration: none;
  border-right:1px solid #fff;
  color:#000;
}
#menu a.active{
  background: #dca;
}
.imageCover{
  height:500px;
  background: none 50% / cover fixed;
}
article{
  margin: 0 auto;
  padding: 50px;
  width: 80%;
  max-width: 1140px;
}

than inside jQuery you watch the window scrollTop and filtering the current positions you set the active class to the related Menu Link:

var $link = $("#menu a");
var $arti = $("article");

$(window).on("scroll resize", function() { 
    var scroll = $(this).scrollTop();
    var id = $arti.filter(function(i, el){
      return $(el).offset().top >= scroll;
    })[0].id;
          $link.removeClass("active");
    $("#menu a[href$="+id+"]").addClass("active");
});

$link.click(function( e ) {
          e.preventDefault(); // Don't follow link!
    var y   = $( $(this).attr("href") ).offset().top;
    $('html, body').stop().animate({scrollTop: y }, 'slow');
});

Upvotes: 3

AndrewL64
AndrewL64

Reputation: 16311

You can add an illusion that will make the images position the way you want by using some parallax scroll effect. Here's one of the many links where you can find tutorials and examples on how to add a parallax effect to your elements using a combination of background fixed positions, scroll speed, etc: https://ihatetomatoes.net/simple-parallax-scrolling-tutorial/

Upvotes: 0

Related Questions