Hero Image in Slider Revolution shifts after opening

Support
#1

Please look at the Hero image when my site opens: www.RaysCountryHam.com.

You will notice a slight jiggle after the overlay Logo appears.

My objective is to have the Background Image and the Logo overlay to open at the same time, if possible.

This has been a reoccurring issue from day one in the development of my site. It seems to work ok for a bit, and now after updates, etc. it is having an issue again.

Your help is most appreciated.

#3

Hello There,

Thanks for writing in! So that the logo and the background image will display at the same time, you may enable the spinner or loader so that all the items are loaded first before the slider will display.

Hope this helps. Please let us know how it goes.

#4

Hello,

Finally found these settings, and copied example you gave above (see screenshot); however, no luck.

Please advise, condition persists and to my eye mars the otherwise introduction.

#5

Hello @windhover4,

Thanks for writing in! So looking into this a little bit, the issue has to do with the resources at play, not necessarily a slider setting.

The image being used as the background-image on the whole slider when it first loads (Blue-Ridge-Mountains-186818265_5822x2848-e1499442866641.jpeg) is 1635x800. The image being used as the background-image on the slide that comes in later (hero1200547.jpg) is 1200x547. If you take the first image at 1635x800. and reduce it down to 1200px wide while maintaining the aspect ration of the photo, that results in 1200x587. Because of this 40px vertical difference in the sizes of the photos when their width is identical, this is why you are seeing the photos “jiggle” when the slide comes in.

There are a couple options you can explore to avoid this:

  1. Ensure that the image you are using on both the overall slider background and the slide layer background is the exact same. Because these images are being used in conjunction with background-size: cover; in the CSS, the browser is taking the photo and stretching them appropriately to ensure they always fill up all available space in their elements. Since your images are different sizes, this is where the “jiggle” occurs. Utilizing the same image for both will eliminate this.
  2. Eliminate one of the background images altogether. As noted previously, if the images are not exactly the same dimensions, you are going to see this movement. I would recommend removing one of them entirely to ensure this doesn’t happen. It depends on the effect you’re going for which one you’ll want to remove. If you wish to have the image show right away when the site loads, remove the layer background image. If you wish for the background image and logo to appear at the same time (which it sounds like you do from your description above), I would recommend taking off the slider background entirely.

Hopefully this helps to point you in the right direction, cheers!

#6

Sorry, I don’t get it. I did not know there were two “background images.” The only one I know how to find is when I edit Slider #2, I see it in the view screen, and if I select transparent to delete it, I have no background. Please.

#7

Can you please point me to the second image?

#8

Hi There,

You have a background image on the section where you have Revolution Slider placed, so the first image is actually loading the section background image not from Revolution Slider.

You had then added a background image(same pic) on Rev Slider which loads and causes the jumping effect.

I have removed the background image of your Rev Slider as it is not necessary and it fix the issue.

Hope it helps

#9

Excellent. That did it.

#10

Glad it worked, cheers!

#11

Sorry to report a further issue with this matter. While the fix resolved the problem with the site when viewed on a desktop, I just noticed that the mobile version no longer shows the Logo overlay. Please see above notes and Secure Note access. I appreciate so much your assistance but do not know how to resolve this issue without your support.

#12

Hi There,

I tested on my Android Phone and on a re-sized browser and it works.

On what device are you testing?

Please clean your browser cache and test it again.

Let us know how it goes.

Thanks

#13

Thank you. Yes, it now comes up on my iPhone. Sorry, no false alarm.

#14

No problem.
If you need anything else we can help you with, don’t hesitate to open another thread.