Discussion on Wordpress Background Scroll Plugin


NuvuScripts supports this item


33 comments found.

How do I change the height of my background image? Right now it is too short. I would like it taller. http://honestmotion.com/brenner/make-your-marketing-better/

you would have to change the background size via the background-size styling property. http://www.w3schools.com/cssref/css3_pr_background-size.asp

It seems that as I change the parameters it is not effecting the way the image scrolls. I have changed data-scroll from .1 to .9 and I see no difference. Same with Duration. http://honestmotion.com/brenner/make-your-marketing-better/.

Basically I don’t want to scroll through so much of the image.


That is because it is not working – you do not have any 3rd party easing scripts so the plugin does not recognize the easing. I have made an update that includes a 3rd party easing script. Please email me at nuvuscripts@gmail.com and I will send you the updated files. Thanks, -Nolan

Hey Guys is there anyway to disable this for tablet/mobile at all as it isn’t working that great on touch devices?

Any help would be MUCH appreciated as tearing my hair out over this!

Regards Si

Send me an email to nuvuscripts@gmail.com and I will email you a possible solution. -Nolan

Hi i need to make a page similar to this: http://yslexperience.com/en-GB/explore-ysl so just the images scrolling at different speeds (and not disappearing like in my test page: http://net-demo.fr/parallax/). Is it possible Also, i don’t want to write my css inline, but directly in the stylesheet using an editor. Will it work applying 2 classes for ex: .bgscroll .class1 {}? Thanks

The way to do this is to create a very large container for the bgscroll and position it absolute and then the background will scroll up the page at different speeds. You can use css styles for the elements, you just need to add the data parameters inline.

<div class="bgscroll" id="rocket" style="background: url('http://nuvuthemes.com/extensions/wp-content/uploads/2013/03/Rocket.png') 58% 0% no-repeat fixed;" data-scroll="3.5" data-duration="1600" data-easing="easeOutCirc" />

#rocket {
    height: 2256px;
    left: 50%;
    position: absolute;
    top: -10%;
    width: 256px;
    z-index: 9999;

Hi, The initial postion of my image is off screen, the image only appears when I scroll. How Can I set it up so that it looks like a “normal” image placed, then scrolls down as the user scrolls down.


Without seeing the issue I cannot tell what is going on. Please email me the link to your page to nuvuscripts@gmail.com Thanks, -Nolan

ah… er thats difficult as the site i am working on is only available internally.

It should appear before scrolling. It is hard to help unless I can see what is going on to check for errors or conflicts. Make sure the background position is set to 50% left from the start like so:
background:url('http://nuvuthemes.com/wp-content/uploads/2013/09/yourimage.jpeg') repeat 50% 0 fixed;


I just purchased your plugin and I’m running into a few issues that are beyond my knowledge. Perhaps you can help me, as I’m starting to think this plugin isn’t compatible with my theme.

My background image is set via body in a global.css file, so all is well there, but there is nowhere for me (that I’m aware of) to call the bgscroll class via div. I believe the body/main index is built from multiple php files and I have zero idea what I’m doing without breaking the theme.

Understandably you would probably need to see the files to get a better idea of what I’m talking about here, but can you think off the top of your head how one might be able to add the bgscroll class to a div when divs are not anywhere to be found for the main background?

I could add some javascript to add the class to your body element without you editing your theme. Please send me an email with your site info to nuvuscripts@gmail.com and I will set you up with this. -Nolan

working for ipad?

Note* – IOS Safari and other mobile browser do not handle the background-position move correctly. The newest version of the plugin disables the script on mobile devices.

the live preview isn’t working. can i see this in action?

can you make this work on only certain pages?

It is back up now. Thanks for the heads up. You can have it on any page elements you give a class of “bgscroll” to. If you need it to scroll the themes main container background then some custom javascript to target one page only would be required and I might be able to help you out with that if needed. -Nolan

Hi Nolan,

I tried using one of the html code samples above to make a layered scroll however nothing happened. I am looking to add scrolling to the background as well as the foreground to this site. http://imperialscroll.mesh-arc.com/ but when I add your code and put in my own images I get this. http://imperialscroll2.mesh-arc.com/test-4

This is the code I used…

<section id=”scrollwrapper” style=”width:100%; height:500px; position:relative;”> </section>

Is there some sort of CSS I also have to define? I am very confused as to how to use this plugin to get a layered parralax effect.

Thank you!

You need the class set to “bgscroll” then add the background in the style: style=”background: url(‘http://nuvuthemes.com/extensions/wp-content/uploads/2013/03/electrical-plug-symbol.png') 50% 0% fixed” Like so:
<section class="bgscroll no-animate" style="background: url('http://nuvuthemes.com/extensions/wp-content/uploads/2013/03/electrical-plug-symbol.png') 50% 0% fixed;"  data-scroll="2.5" ></section>
Please refer to the doc page at: http://imperialscroll2.mesh-arc.com/wp-admin/options-general.php?page=bg_scroll_plugin



Will your plugin allow me to set one image for the main background and a different image for the body/container background?


Will your plugin allow me to set one image for the main background and a different image for the body/container background?

You can set any background you wish the plugin only scrolls any background you have set. You need access to the page element to set the “bgscroll” class so this might require you to edit your theme files.

Hi Nolan:

This is a great plugin!

I would like to ‘scroll’ foreground text and images over a scrolling background image. I understand that they should all be set to class=’bsscroll’ and background images set as prescribed. I have had some success but would appreciate seeing correct format. Could you help with an example? Thanks in advance. Shaun

There are examples in the admin-settings doc page -



Check out how the text scrolls on this page independantly: http://www.numero.com/fr/portrait/michelle-monaghan-interview-cinema-frederic-auerbach

Can this be done with your plugin? Trying to figure it ouit :)

Sorry this is not possible with this plugin. Thanks, -Nolan