stellar.js breaks the responsiveness of background image and how to resolve it?

Question

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!