Jump to content
tsalstrand

Background Too Stretched

Recommended Posts

tsalstrand    8
tsalstrand

First off, as I mentioned on the product page... thanks a lot for bringing this to Pagelines Framework!

 

The site that I'm currently working to integrate Superfade into is http://patdev.us

 

When I look at http://srobbin.com/jquery-plugins/backstretch/, the background images aren't stretched and are fixed when scrolling.  I'm basically trying to do the same.

 

I'm not good with js, but I know that the resizing issue probably comes from resize()

 

Could you help me in fixing this issue?  I tried resizing my images to 1200x800 that is on Scott Robbins' website... but it still stretches them.

 

Thanks in advance!
Steve

Share this post


Link to post
Share on other sites
cmunns    16
cmunns

You can apply the fixed position yourself using some css. Use the important tag to override the default inline style.

 

 

 

.backstretch {position:fixed!important;} 
 
  • Like 1

Share this post


Link to post
Share on other sites
tsalstrand    8
tsalstrand

So I spoke a little too soon.  The 

.backstretch {position:fixed!important;
} 

 

worked good for fixing the background attachment, but the images are still stretching.  How do I stop them from stretching?

Share this post


Link to post
Share on other sites
tsalstrand    8
tsalstrand

Hi Adam,

 

I just wanted to see if you have any ideas... we really want to use this.

 

Thanks in advance!

Share this post


Link to post
Share on other sites
cmunns    16
cmunns

The point of this plugin is actually to provide image stretching so I'm confused at this point what you are requesting. If you are experiencing aliasing or blur, then I would suggest using a higher res photo to avoid that.

Share this post


Link to post
Share on other sites
tsalstrand    8
tsalstrand

We are using high-res images (approx. 1800x1200)... still it is causing the background to be blurred/pixelated.

 

If anyone else is having the same problem, I want to provide the solution that we found: 

<script>
  
(function($){
  $(document).ready(function()
              {
    $.backstretch([
           "http://patdev.us/wp-content/uploads/2013/03/pat-bg1.jpg",
          "http://patdev.us/wp-content/uploads/2013/03/pat-bg33.jpg"
        ], {
            fade:700,
            duration: 4500
        });    
          
          });
})(jQuery);
            
</script>

 

Cheers!

Share this post


Link to post
Share on other sites
cmunns    16
cmunns

I'm not sure if this way of writing the script is correct, because what you've done is call the jQuery document ready function twice.

 

 

 

(function($){
// code here
)(jQuery);
 

 

Is the same thing as 

 

 

 

$(document).ready(function(){    
// code here          
});
 

 

If it works for you then that's great, I just wanted to bring it to your attention in case something gets wonky.

  • Like 1

Share this post


Link to post
Share on other sites
tsalstrand    8
tsalstrand

Thanks Adam!  As I said in the original post... I'm not that great at jQuery, js, etc.  So thanks for the correction! :thumbsu:

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • tsalstrand
      By tsalstrand
      In Pagelines 2.0, Adam Munns created a plugin called Superfade that was free and based upon Scott Robbin's jQuery "Backstretch" script.
       
      Well, while that might not be available for DMS, I'm trying to just load the script and write a little jQuery to make it work.  Scott Robbin's gave some instructions on his website, but for the life of me, I can't get it to work for the background of one of my elements.
       
      I'm trying to get it to work on this page: http://convertwith.me/our-process/
      For the ID #pl_area3o2o3m which has a class equivalency of .tester-area
       
      This is what I have in the "custom scripts" area:
      <script> $(document).ready(function() { $("#pl_area3o2o3m").backstretch([ "http://dl.dropbox.com/u/515046/www/outside.jpg" , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg" , "http://dl.dropbox.com/u/515046/www/cheers.jpg" ], {duration: 3000, fade: 750}); }); </script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script> <script src="jquery.backstretch.min.js"></script> I've also try switching out the ID for the class .tester-area
       
      jquery.backstretch.min.js is loading properly, so it has to be how I'm calling it in, but I can't figure out where I'm missing the mark.  

      Suggestions would be great!
       
      Thanks,
      Steve
    • ScottC
      By ScottC
      Is there a way to change the backgrounds from fitting to the full page? Before i had one background that left bars on the side of the page. Also, when i enable super fade, the content shadow disappears. Is there a way to get that back or even edit that to an opaque white background? 
       
      I searched around and did not find an answer to this. Please forgive me if this is an stupid question, I am new to this.
       
      Thanks
    • mbreese1
      By mbreese1
      Hi Adam!
       
      Thanks a bunch for all the great plugins Unfortunately I've hit a duh speedbump. I want to *just* have superfade on one page but don't now how. I can turn off all other pages with page-specific css but that seems like a lot of unnecessary css. I've got
      .page-id-113 .backstretch { position: fixed!important; visibility: visible !important; } but obviously that doesn't do anything to NOT show superfade on every other page. Any help would be greatly appreciated

      Bree
×