Jump to content

Archived

This topic is now archived and is closed to further replies.

amorgen

Citi Parallax wrapping image

Recommended Posts

amorgen    0
amorgen

I'm using 5 images all are jpegs with dimensions 1600 x 600 (as recommended). When Parallax is turned off all the images view correctly. But when Parallax is turned on the first image (intro) appears correctly but all subsequent images (about, portfolio, contact, and blog) are wrapping the image with a portion of the bottom of the image displaying at the top. It appears that adjusting the width of the web browser (i've tried Safari and Chrome) has a direct impact on the degree of wrapping. I've attached a screen grap of the problem.

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

 What you're seing, isn't visible when your logged out. It seems the wp admin bar displaces the calculated positions of the backgrounds. Not to much of a big deal really because nobody else sees that.


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
amorgen    0
amorgen

I'm also seeing this when I'm logged out. I've tried it from Safari logged out and on an iPad which I never have logged into. All show the same issue.

Share this post


Link to post
Share on other sites
amorgen    0
amorgen

I've reset citi theme to default settings and I still see the issue with the default images, tested in Safari not logged in. If the width of the Safari browser is greater then 1024px then there is no issue, but if it smaller (1015 px or less) the issue shows up and gets worse the smaller you make the width of the browser window.

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

The demo and my local copy doesn't do this. I also haven't had any reports of this.

 

The background-size is set to background-size:cover, so it's always going to be different because the image scales and remains centered. If you want a different effect, try background-size:contain where the image breaks are at. I'm on vacation right now so I can't bring up the site and tell you the selectors, but you can identify them with inspector.


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
opwolken    3
opwolken

I would like to bring up this post because I have the same problem amergon has or had. I have made a workaround for this problem on my side, to make the lower part of the image white, like the background and the header. A demo can be found on www.test.opwolken.com. the picture is 768 pixels high and the section is 400px high. If you look closely you see the lower part of the image (all white) on top of the rest of the image.

 

Is there a solution for the lower part of the image to not show up on top when opening the website?

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

I just can't replicate this at all. When you are logged out, there is no issue.

 

http://citi.nichola.us/

 

The demo shows no spacing at the top.


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
andyaddis    0
andyaddis

I have the exact same issue... really need a fix

Share this post


Link to post
Share on other sites

  • Similar Content

    • flourishdesignstudio
      By flourishdesignstudio
      Hi,
      I am having an issue with the Lax sections on Platform 5. I can embed a widget or text box into a Lax section which is really neat, but the image in the background (the parallax image) seems to get stretched and doesn't scale in an attractive way.  For example, the page http://ed6.61e.myftpupload.com/#clients has a parallax section with a woman's face  and I thought is would scale as the browser window gets smaller but the zoom-level never changes. Also, the amount of parallax shift seems more dramatic than what we want. I thought that if I uploaded a shorter image it would scan/scroll less since the height from the image's top to bottom would be less. However, that doesn't seem to have any effect and I am at a loss of how to properly control the way the image is displayed within that box. Any thoughts, tips, or suggestions to get me pointed in the right direction?
      Thanks so much for the help!
    • globalnative
      By globalnative+
      Hi there! 
      I'm wondering if I can and how I can easily make a one page scrolling parallax site with menus which scroll rather than take me to a new page?
      Something like this: http://demo.vellumwp.com/home-pages/one-page-resort/.
      Thank you kindly
      Nate
      PS: my site: http://natemaingard.com
    • janessa_cotugno
      By janessa_cotugno+
      Hey,
      I've made a simple landing page for a friend, and while the parallax feature looks great on desktop, it resizes (zooms way in) the image on the mobile version and it looks really bad. When it first pulls up, the image looks like the correct size, but once I try to scroll on my phone, it zooms in the image and seems to have a slight parallax effect. 
      There are two separate sections that have a background image on the canvas with the "Alternative Parallaxed Background Image" effect. I was thinking that I could just disable the parallax on the mobile version only, but I haven't had success in figuring it out.
      Ideally, on the mobile site, I would like the background images to fit the full height of the screen instead of zoomed in so much. 
      Any suggestions? 
      Here is the site for reference: www.sweetnectarkirtan.com
      Thanks!
    • floydwebb
      By floydwebb+
      The parallax and hero sections are jumping to the top of the template in PL5 See  here http://screencast.com/t/TLajih8MEM6
      No matter what I do, clear browser cache, whatever. The Parallax with the embeddded Hero section will ot stay on the bottom of the page above the footer.
      Help, please. This started happening at the worst possible time, when I was in a client meeting walking here through the site that is already LATE. 
      Floyd Webb
    • Bill Deignan
      By Bill Deignan+
      does the LAX extension provide a parallax option? 
×