2

I have posted a video screen grab of my issue here: http://whataprettyface.ca/datastellarissue.html

I have a single-page site with a dynamic vertical height that expands when certain sections are called upon. If the user calls a photo gallery from the portfolio section, the parallax effect is pushed down, revealing a large section of the background of its parent container. As the video illustrates, this is only an issue after vertically expanding the page by opening the portfolio images.

The background image cannot be repeated and I do not wish to use a white backup workaround. I also don't want to set a fixed height to the expandable section. I would, however, like to keep this parallax effect.

I did find a similar issue on here but it had never really been answered.

I am using Stellar.js v0.6.2 and have thrown up an unminified version on my site for ease of viewing: http://whataprettyface.ca/js/jquery.stellar.js

The CSS for the container looks like this:

.contactbackground {
    position: relative;
    background-image:url(../images/index/contact_background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}

Any help is greatly appreciated!

hipsiguy
  • 59
  • 5
  • It appears that your image is constantly resized on scrolling, cause by `background-size: cover;` (I took that from the unappended link). This may cause performance issues, as every single time the window moves, the image is resized. – Friso van Dijk Oct 23 '17 at 15:50

0 Answers0