• 0

DMS2 Photo Dimensions Recommended for Parallax

Question

Posted · Report post

On madskydesign.com/about/ I have two sections with "Parallaxed Background Image" selected.  At about a screen width  of 1000px I get the image repeating below.  Is there a recommended size for section/canvas background images?  

 

On mobile phone the images also appear to become left aligned and not resized to better fit the screen. 

Share this post


Link to post
Share on other sites

16 answers to this question

  • 0

Posted · Report post

Basically, you want the image to have a height greater than the area you are adding it to, if the image has a height of 400px and the area you're adding it to has a height of 400 or greater then your image is going to be repeated. I would recommend a image with a large width lets say 2000 and a min height of 600.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

On madskydesign.com/about/  I have an image of a giraffe it is 2560X1694 (222kB) and should be ample to work in the area.  I have the "Parallaxed Background Image" selected but the effect doesn't seem to be working.  Additionally, on mobile devices the photo isn't being scaled in size but left aligned so you see only the left edge of the photo.  I removed all custom css/scripts but nothing changed.  I don't think this feature is working correctly.  Are there settings somewhere that I need adjust?

 

When installing DMS2 I deleted DMS1 via FTP and then installed DMS2 via the WP installer, everything else seems to be working great.  I wouldn't think installing in that fashion would impact the parallax.

 

Hosted with WPE and I think they are running PHP 5.3.2

 

Please help. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It might look left aligned but i think the CSS below is offsetting it

background-position:50% -162px;

offsetting to the left by 162px

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I can compensate for that then.  Why isn't the image parallaxing on desktop?  Something isn't right as when you resize the desktop window to smaller then much more of the photo shows duplicated at the bottom and 1694 should be tall enough to handle the space.  Is DMS not scaling these photos to fit the space in some way?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Simon_P"] and @[member="Danny

 

I thought parallax issues were supposed to be resolved in DMS2.  If I'm doing something wrong, please advise.  Otherwise, I still don't think the "Parallaxed Background Image" works.  The other parallax option of "Translate Content on Scroll" works well.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I've just used your Coffee image with the red background on my site and I am having no issue what so ever, I even used your Amy text.

 

https://www.youtube.com/watch?v=wKIlPE5MWYQ

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@ Danny  What settings do you have on the site/section?  I you look at my site, scroll the page, resize the page then you will see the issue.  I'm getting inconsistent results sometimes the giraffe photo duplicates in the section when the window size is reduced sometimes it scales.  The coffee image is parallaxing some on my site but I can't tell that the giraffe image is at all.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Here is my settings!

 

http://cl.ly/image/060J1l1x3I0O

 

Thats it, I have no issue, what are your settings ?

 

Do you have any plugins installed that could be effecting it in anyway ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I only have Contact 7, Content Copyright, DMS Pro Tools, Pagelines Updater, Wordpress SEO.  Like I said in a previous post I disabled the plugins but no changes.

 

When installing DMS2 I deleted DMS1 via FTP and then installed DMS2 via the WP installer, everything else seems to be working great.  I wouldn't think installing in that fashion would impact the parallax.  Do you think this would have mattered? 

 

Also noticed that if you resize the window from a large size to say a third of the display then the photo repeats, if at that point you refresh the page the image corrects and can then be expanded larger (full screen), then sized back down and the image is fine. 

 

Do you want me to turn on Debug, do you want to login to my site and take a look?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I don't think your installation method would or should have had any effect. Can you email our helpdesk with your admin username and password, along with a link to your site and this topic, so our staff have a reference.

 

hello at pagelines dot com

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny

 

I can.  Do you want me to message you with login as well?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny

 

I didn't email the login as I'm not really sure what the plan here is... when I email that is someone going to login and assist me with this?  

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Email our helpdesk and as long as you provided a link to this topic, they will add a moderator note with your admin username and password. Then we can check how you have setup your Parallax.

 

hello at pagelines dot com

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

OK, I think I may have found what is causing your issue. When you're working with the Canvas section with the Parallax Background image option, which doesn't appear to be working for you. Do you have the RevSlider section on that template too ?

 

If so, that may be the cause of your issue, see here - https://github.com/pagelines/DMS/issues/706

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I don't have rev slider on that page.  I do have it in the site.  I can't get to the github  link you provided....404 error.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny

 

So I worked with this a bit more and here is what I discovered.  I deleted the Rev Slider from the site entirely and no change.  The giraffe photo is an jpg file converting to png had no impact.  

 

I have area padding of 150px and removing had no impact.  I have the Parallaxed BacKground Image options selected and I could not see any movement in the image at all.  On mobile most of the image was cutoff probably because of this CSS as @Martin_Davies pointed out(Posted 27 March 2014 - 11:43 AM It might look left aligned but i think the CSS below is offsetting it background-position:50% -162px;offsetting to the left by 162px) .  However, I hadn't written that CSS to offset.  

 

When inspected, the CSS looked like this...madskydesign.com

  1. -webkit-background-clipborder-box;
  2. -webkit-background-originpadding-box;
  3. -webkit-background-sizeauto;
  4. -webkit-font-smoothingantialiased;
  5. background-attachmentscroll;
  6. background-clipborder-box;
  7. background-colorrgba(0, 0, 0, 0);
  8. background-imagenone;
  9. background-originpadding-box;
  10. background-position50% 0px;
  11. background-sizeauto;
  12. border-bottom-colorrgb(40, 40, 40);
  13. border-bottom-stylenone;
  14. border-bottom-width0px;
  15. border-image-outset0px;
  16. border-image-repeatstretch;
  17. border-image-slice100%;
  18. border-image-sourcenone;
  19. border-image-width1;
  20. border-left-colorrgb(40, 40, 40);
  21. border-left-stylenone;
  22. border-left-width0px;
  23. border-right-colorrgb(40, 40, 40);
  24. border-right-stylenone;
  25. border-right-width0px;
  26. border-top-colorrgb(40, 40, 40);
  27. border-top-stylenone;
  28. border-top-width0px;
  29. colorrgb(40, 40, 40);
  30. displayblock;
  31. font-family'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
  32. font-size14px;
  33. font-weight300;
  34. height267.0625px;
  35. line-height21px;
  36. margin-bottom0px;
  37. margin-left0px;
  38. margin-right0px;
  39. margin-top0px;
  40. outline-colorrgb(40, 40, 40);
  41. outline-stylenone;
  42. outline-width0px;
  43. padding-bottom150px;
  44. padding-left0px;
  45. padding-right0px;
  46. padding-top150px;
  47. text-shadowrgba(0, 0, 0, 0.00392157) 1px 1px 1px;
  48. vertical-alignbaseline;
  49. zoom1;

 

 

On a test site where parallax was working (different theme madsky.wpengine.com) the CSS looked like this

 

  1. -webkit-background-sizecover;
  2. background-attachmentfixed;
  3. background-colorrgba(0, 0, 0, 0);
  4. background-image:url(http://madsky.wpengine.com/wp-content/uploads/2014/01/giraffe.jpg);
  5. background-position50% -2px;
  6. background-repeatno-repeat;
  7. background-sizecover;
  8. box-sizingborder-box;
  9. colorrgb(40, 40, 40);
  10. displayblock;
  11. font-family'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
  12. font-size14px;
  13. font-weight300;
  14. height420.359375px;
  15. line-height23.799999237060547px;
  16. margin-bottom0px;
  17. margin-left0px;
  18. margin-right0px;
  19. margin-top0px;
  20. padding-bottom150px;
  21. padding-left0px;
  22. padding-right0px;
  23. padding-top150px;

 

 

Background Image was set to none on the DMS2 CSS so I added this

 

.para-fix {.pl-area-wrap{
  -webkit-background-size: cover;
    background-size: cover;
background-attachment: fixed;
background-position: 50% 0px;
background-repeat: no-repeat;
box-sizing: border-box;
display: block;
  }
}
 
so the computed CSS looks like
  1. -webkit-backface-visibilityhidden;
  2. -webkit-background-clipborder-box;
  3. -webkit-background-originpadding-box;
  4. -webkit-background-sizeauto;
  5. -webkit-font-smoothingantialiased;
  6. background-attachmentscroll;
  7. background-clipborder-box;
  8. background-colorrgba(0, 0, 0, 0);
  9. background-imagenone;
  10. background-originpadding-box;
  11. background-sizeauto;
  12. border-bottom-colorrgb(255, 255, 255);
  13. border-bottom-stylenone;
  14. border-bottom-width0px;
  15. border-image-outset0px;
  16. border-image-repeatstretch;
  17. border-image-slice100%;
  18. border-image-sourcenone;
  19. border-image-width1;
  20. border-left-colorrgb(255, 255, 255);
  21. border-left-stylenone;
  22. border-left-width0px;
  23. border-right-colorrgb(255, 255, 255);
  24. border-right-stylenone;
  25. border-right-width0px;
  26. border-top-colorrgb(255, 255, 255);
  27. border-top-stylenone;
  28. border-top-width0px;
  29. colorrgb(255, 255, 255);
  30. displayblock;
  31. font-family'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
  32. font-size14px;
  33. font-weightnormal;
  34. height137.0625px;
  35. line-height21px;
  36. margin-bottom0px;
  37. margin-left0px;
  38. margin-right0px;
  39. margin-top0px;
  40. outline-colorrgb(255, 255, 255);
  41. outline-stylenone;
  42. outline-width0px;
  43. padding-bottom50px;
  44. padding-left0px;
  45. padding-right0px;
  46. padding-top50px;
  47. text-aligncenter;
  48. text-shadowrgba(0, 0, 0, 0.00392157) 1px 1px 1px;
  49. vertical-alignbaseline;
  50. zoom1;

 

 

This creates the parallax effect I was sort of looking for but there are two issues.  First the image doesn't move at all (in the other site it move slightly with the text).  Is there a way to accomplish that by adding something more to my code?

 

Second, the photo is extremely zoomed in on mobile devices.  I suppose I could change the photo size using @media and base it off display size but is there a better way to accomplish this?

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