CODEWITHSUNDEEP
htmlcssimagebackground-imageparallax
Adam Bell
Adam Bell

Reputation: 1045

CSS Parallax image issues with image cutting off

Having issues on this site (http://rvwinvesting.com/2016/) where I have two parallax images.One is a seamless background in the middle and the other is a photo of a series of offices buildings near the footer on the bottom of the page. That's the issue. When you scroll up, the too and bottom of the page appears so it looks odd instead of one scrolling image. Is there some way I can clear this up? The image is over 1200px in height and the div is only 600px and I've tried smaller div sizes as well and no matter what, that seam appears. Here's my CSS for that div:

#building {
    background: url(http://rvwinvesting.com/2014/wp-content/uploads/2014/09/rvw-building.jpg) 50% 0 fixed;
    height: 600px;
    -webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important;
 }

Tried100%100% for background-size but that just stretches the photo. No good.

Upvotes: 1

Views: 7351

Answers (3)

Jimba Tamang
Jimba Tamang

Reputation: 1335

I am not 100% sure if I understand your problem clearly but if you are talking about the repeating issue of building at the bottom, here is my suggestion:

  1. You don't have to use !important after background-size (just clearing your code a bit)
  2. add no-repeat on background to avoid multiple building background.
  3. only start the parallax of building background when it's on viewport or just before the viewport. In your case when #building reach to the bottom of the screen, start parallax effect.

Hope it will help.

Updated on March 22, 2016

I downloaded this theme (BootstrapParallax) and played around it, please do the following things in-order to start your parallax only when it appear:

**add new "data" attributes to your desired div/section: data-start-at="bottom" so your div/section will be something like:

<section id="building" data-speed="4" data-type="background" data-start-at="bottom">

after that, find this .js file inside your theme folder (path: js/strap-extras.js) and replace with following code:

// Placeholder
  jQuery(document).ready(function(){
     // cache the window object
     jQuerywindow = jQuery(window);

     jQuery('section[data-type="background"]').each(function(){
       // declare the variable to affect the defined data-type
       var jQueryscroll = jQuery(this),
          startAt = jQueryscroll.data('start-at'),
          yPos, coords, thisOffset;

        jQuery(window).scroll(function() {
          // HTML5 proves useful for helping with creating JS functions!
          // also, negative value because we're scrolling upwards    

          if(!startAt) {

             yPos = -(jQuerywindow.scrollTop() / jQueryscroll.data('speed'));

            // background position
            coords = '50% '+ yPos + 'px';

          } else {
            thisOffset = jQueryscroll.offset();
            thisTop = thisOffset.top;

            //console.log(thisTop - jQuerywindow.outerHeight(), ' wondow: ', jQuerywindow.scrollTop());

            if( (thisTop - jQuerywindow.outerHeight()) < jQuerywindow.scrollTop() ) {

               yPos = -(jQuerywindow.scrollTop() / jQueryscroll.data('speed'));
              // background position
              coords = '50% '+ yPos + 'px';

            }

          }

          // move the background
          jQueryscroll.css({ backgroundPosition: coords });   
        }); // end window scroll
     });  // end section function
  }); // close out script

  document.createElement("section");

PS: js can be write in more clear and efficient way, this is just an example.

And, please clear your css, you don't need !important everywhere.

Your clean css can be this:

#building {
    background: url(/wp-content/uploads/2014/09/rvw-building.jpg) no-repeat 50% 0 fixed;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 600px;
}

you may need to adjust a bit, but hope it will solve your problems.

Otherwise, you have to learn how to write js/css :)

enjoy!

-- Jimba

Upvotes: 0

Adam Bell
Adam Bell

Reputation: 1045

I think I finally got it to work. A padding-top setting seemed to make all the difference. Here's the new code:

#building {
    background: url(http://rvwinvesting.com/2014/wp-content/uploads/2014/09/rvw-building.jpg) 50% 0 fixed;
    background-position: top center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    margin: 0 auto !important;
    padding-top: 250px;
    position: relative;
    width: 100%;
    height: 600px;
 }

Upvotes: 1

Naman Nehra
Naman Nehra

Reputation: 592

The top and bottom part of the image are croped out as the #building is wider than the image. You can either make the div longer or find a wider image.

Upvotes: 0

Related Questions