[joshanonParticipant]

Hi,
I’m working on http://perpetualcapital.com/?page_id=67 Each of the background images is 1400px across, and there’s plenty of height available. Using some CSS from another forum thread, I’ve managed to stop the first two images from being zoomed in yet still enable parallax scrolling (background-position: 50% 0px !important;height: 150px;background-size: 100%;). However, the third image isn’t cooperating. When I use that CSS, the image disappears. With parallax on, the image automatically zooms in a lot. Any idea how to fix it?

I have to say judging from all the threads, it’s not really intuitive how to setup images to work well with parallax.

Thanks,
Josh

[LelyModerator]

Hello Josh,

Thanks for posting in.
I did checked your site. The third image background with parallax effect and the text Difference seems working fine. It is not zooming in same with the first two parallax background image. Can you please clarify the issue by giving us a screenshot so we can see what we can do?

[joshanonParticipant]

No, it’s definitely zoomed. Take a look at the full source image:
http://perpetualcapital.com/wp-content/uploads/2015/09/refl.jpg

Here’s what I see in Chrome on OS X:
https://dl.dropboxusercontent.com/u/361161/zoomed.jpg

It’s basically only a crop of part of the middle of the image by the clouds.

[Paul RModerator]

Hi,

To make it not zoomed, you can add this under Custom > CSS in the Customizer.

.page-id-67 #x-section-5 {
       background-size:contain;
}

Hope that helps.

[joshanonParticipant]

Hi, that made the image disappear completely, so I’d say it’s worse. But thanks for trying…

[joshanonParticipant]

Actually, it’s there, but depending on when I scroll, it disappears. Any thoughts for how to align the image closer to the box so that the visible region doesn’t scroll off the image, aside from “make the image really tall?” Thanks!

[FriechModerator]

Hi There,

Please update the css code to

.page-id-67 #x-section-5 {
    background-size: 100% 100%;
}

Hope it helps, Cheers!

[joshanonParticipant]

Hmm, that’s definitely stretching the image in that space (you can see that by resizing the page’s width or applying it to one of the other images), but it sort of works with this image.

It’d be great if parallax images were more user friendly. It seems like there are a lot of questions about getting them aligned nicely. Thanks for the help, though.

[Paul RModerator]

Hi Josh,

Parallax by default sets the background image size to cover which means

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

Your other options are auto,length,percentage, cover,contain, initial and inherit.

You can check the description of each of these option here

and to see the effect of each of these option live you can check out the link below.

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=auto

You can play with the values until you achieve your desired result

.page-id-67 #x-section-5 {
    background-size: 100% 100%;
}

PS. You might as well need to play with your image background size.

Hope that helps.

[Author]

Posts