1

I have a pretty large background image (1920x1080) on my site that works responsively until I add the stellar.js.

For the background image I have this css rule:

.about {
  background-image: url(../img/portfolioheroimage3-2.jpg);
  background-attachment: fixed;
  background-size: cover;

So without using stellar.js, it is responsive. Say I narrow the page to a great degree, the background image height expands and everything works fine.

However things went awry after I added stellar.js. I followed the doc and added this line in script tag: $.stellar();

Cool, the parallax effect did work. But it broke the responsiveness of my background image. Say I again narrow the page, the background image didn't grow vertically and instead it became "repeated". I tried setting background-repeat: no-repeat. But it got worse because the text went outside the background image.

Did someone also face the issue like this and know a way to have both responsiveness and parallax effect for the background image?

Thanks a bunch!

Dawei
  • 87
  • 1
  • 4
  • If I recall correcly, parallex is replicated by placing ``divs`` at full width with the same picture at different angles (?). I'm assuming it's placing an element in the body that's ruining the positioning context. – Joshua Feb 07 '17 at 07:37
  • not sure how to get stellar.js to work in jsfiddle though as the external resource is not recognized as javascript MIME type – Dawei Feb 07 '17 at 07:58
  • https://jsfiddle.net/nnfjyn4c/9/ – Dawei Apr 08 '17 at 01:42

0 Answers0