[AntoineParticipant]

Hi,

I’d like to get smooth scroll and working on the same time but I don’t manage it. Here is my code without the smooth scroll:
[content_band no_margin="true" inner_container="false" bg_pattern="https://paleoflaneur.com/wp-content/uploads/2015/06/Homepage-Happy-Healty-Paleo-Lifestyle1.jpg" style="background-size:cover;" ]

And it looks like this:

As soon as I add the paralax with the following code:
[content_band no_margin="true" inner_container="false" bg_pattern="https://paleoflaneur.com/wp-content/uploads/2015/06/Homepage-Happy-Healty-Paleo-Lifestyle1.jpg" style="background-size:cover;" parallax="true"]

It looks like this, which is not good:

How can I have the image display like in the first case, but with the parallax activated?

Thanks for your help.

[RadModerator]

Hi Antione,

Thanks for writing in.

Please try background-size:cover !important; background-position: top center !important;

Would you mind providing a url that has parallax?

Thanks!

[AntoineParticipant]

Thanks. It’s better but the image is still not large enough (too much zoom on it, as I’d like to see more of the tree).

URL: https://paleoflaneur.com

What should I change to make it works?

[Paul RModerator]

Hi Antoine,

You can change the background-position and background size values to achieve your desired look.

eg.

background-size: 120% !important;background-position: 50% 40px !important;

Change 120% and 40px to adjust your image.

Hope that helps.

[AntoineParticipant]

Hi,

Thanks for your solution but it’s not going to work to achieve what I want. I need to use “background-size:cover !important;” as I want it to be responsive.

It works fine without the parallax turned on. I simply want to have the parallax turned on and the image to display entirely. The problem is, that when I do it so, the image doesn’t display entirely anymore (as I explained in my previous post).

If there is no solution to make it works, I will then have to forget about using parallax, as it doesn’t look nice when the image doesn’t display entirely.

[ChristopherModerator]

Hi there,

Please remove background-size:cover !important; and try background-size: 100% 100% !important;.

Hope it helps.

[AntoineParticipant]

Hi,

It unfortunately doesn’t work as it compressed the image when the screen is getting smaller. See here:

Is there a way to keep the image’ proportions? If yes, it would be the solution.
“background-size:cover !important;” makes the right resultat for the image, but it doesn’t work as I want with parallax turned on.

Thanks for your help.

[ChristopherModerator]

Hi there,

This is the limitation of background image property, you can’t keep the same ratio and at the same time cover the whole area on different resolutions.

You can use visibility shortcode and display this section for desktop viewers, and add another section with appropriate image background or background color for mobile devices.

Available values for background size property are :

background-size:cover;
background-size:contain;
background-size:100% 100%;
background-size:100% auto;

You can try each of above codes and check the result.

Hope that helps.

[AntoineParticipant]

Hi,

Thanks for the different options. background-size:100% auto; seems to work fine in this case, as I can have the parallax as well on it.

I guess I should have a different image for mobile devices though. How can I do this?

Thanks again for your help, your support is amazing and really valuable!

[Rue NelModerator]

Hello There,

Thanks for updating the thread! To have a different image for smaller screens, please try to add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (max-width: 979px){
  #x-content-band-ID{
    background-image: url(http://path-to-the-image-here) !important;
  }
}

Please take note of the ID of your content band you are applying to. Let us know if this has been helpful to you.

[AntoineParticipant]

I thought the problem was solved, but this is not the case. I tried on a bigger screen and I have got the following

As you can see, the image is not covering properly and it results to a strange things. Can the solution be to use a similar code that the one you provided for the mobile?

[ChristopherModerator]

Hi there,

Only cover value covers the whole area, which won’t let you to display background image completely on all resolutions as you tested before.
Please add background-repeat:no-repeat; in style field of section.

Hope it helps.

[AntoineParticipant]

Thanks for the info. It doesn’t seem to work though. I’m getting crazy with this image as I still do not manage to get what I want. I did not even manage to make the covert works again and I can’t get rid of this “repeat” image. (Cover worked fine before – with no parallax, and I don’t understand why it doesn’t work anymore)

I have the following style=”background-size:100% auto; background-repeat:no-repeat;”
I tried with style=”background-size:cover; background-repeat:no-repeat;” as well and it doesn’t work. I tried many things but I don’t manage it. I don’t understand what I am doing wrong. Sorry.

Thanks for your help.

[LelyModerator]

Hello Antoine,

Sorry that didn’t work for you. Would mind uploading the screenshots here:http://tinypic.com/?t=postupload for both mobile and desktop view? So we can see and check ourselves. Also, can you please clarify why it doesn’t work? If you could give us a clear description of how it is suppose to be it would be better.

Thank you.

[AntoineParticipant]

I though I explained what I want (look at the first post of this topic). I’d like the image to display with the right proportion, and to display full width. I don’t mind if the doesn’t show the image entirely on the top and bottom, but the image should be approximately centered (so that you see the tree coming out of the water).

On the top of this, I would ideally have parallax turned on. Currently (https:paleoflaneur.com), I have use style=”background-size:cover;” and I have the parallax turned off as it otherwise doesn’t display the image as I want (as explained it my first post in this topic.

The text should be responsive as well to look better, but I did not really manage to get a good result with it and I gave up for now, as I already have enough problem with the image.

I thought that using style=”background-size:100% auto;” was the solution, but it doesn’t work well with parallax either. The solution would probably to use style=”background-size:100% auto;” and to have different sizes of images for the different screens. The problem that I still see, is that when I have parallax turned on, it never displays the bottom of the image. It means that you only see the top of the tree and the sky. Do you know how to solve this? Yes Yes, I might then be able to make it works the way I want.

If you need to know anything else, let me know.

[Author]

Posts