Parallax Block Enlarges the image

Hi All,

I just tried putting in the parallax block on this page: http://mikesmull.com/bashore/

It works, but it totally blows up the image. How do I set it so the image stays closer to the size it should be? I have it sized the same as my slider above 1500 x 600. I want to be able to actually see the trucks as you scroll but it’s zoomed in. I don’t see a setting for this. I can create the Parallax in Headway if I need to but I’m trying to do as much in this site as possible with the BB Plugin.

Let me know.

Hey Mike,

Not really sure if there is anything we can do there aside from changing the parallax image that you are using. Also, the content area where the background image is applied to isn’t quite that big compared to the background image itself. Even if you don’t use a parallax background, the background image itself won’t fit there. We either have to crop some part of it or shrink it making it look compressed. Do you think you could create one with Headway and we can check?

Ben

I’m fine with cropping it. I’m just not sure why it zoomed in so far. I did try it as just a static image and it came in fine. I can add it in Headway but I was trying to use one template for the site -Header, Nav and Footer and putting the guts in with BB. I also like your button tool, etc. But, I know Headway won’t enlarge the photo because I’ve used their Parallax background on a site just last week.

So, if it’s not a setting that we can change easily, I guess it’s on to Headway!

Hey Mike,

I actually tried playing around with your background image on my localhost and I think I see the problem now. Do you think you could add this CSS snippet and see if that takes care of it for you? If it does I may need to report it to the guys as an enhancement.

.fl-builder-content .fl-node-55b657607ae42 .fl-row-content-wrap {
    background-size: 100% 100%;
}

Ben

Hi Ben. Just letting you know your CSS snippet does fix the zooming problem. I had the same issue as Mike and it is fixed with the Snippet (replacing his node with my node) for anyone reading this.

Thanks for the feedback, Nathan! Enjoy BB! :slight_smile:

Ben

Never mind. I spoke too soon. Here’s the background set as an image: image

And the same image can be seen stretched and in Parallax mode at mossalot.com

Any ideas on what might be going on?

Hey Nathan,

It has to do with how the Parallax background is styled, and the aspect ratio of the image you’re using. You can try playing around with those values above and see if it works for you. The left side is for the width of the image, so you’ll want to adjust the right side.

FWIW, I tried the same image on another parallax theme with the same content height and it looks the same, if not worse. Most of them applies a background-size: cover; so it covers the entire content area, including the invisible part for when you scroll down the page(for the parallax effect). Adjusting the second value above reduces the height of the background image so feel free to play around with it.

Ben