Docs

[Rad]

Hi there,

It’s not being cropped, it’s being positioned 🙂

In the standard background (not parallax), the background image size should match the container’s aspect ratio. Let’s use this as reference http://andrew.hedges.name/experiments/aspect_ratio/. Let’s say in my view since I have the large screen, the first section size is 1420×792 with the aspect ratio of 355 : 198. Aspect ratio will be the same regardless of screen size, I only use my screen size as a reference to get the aspect ratio. Now, with your background size of 1600px and to maintain the aspect ratio of 355 : 198, its height should 892px.

Now back to parallax background, aspect ratio rule isn’t applicable due to positioning. Parallax is an effect, it needs to move from one position to another position (eg. while scrolling). If your image is exactly fitted to the container, then when the image moves down and up, some blank space will appear as it moves.

As a test, you can add this CSS to Admin > Appearance > Customizer > Custom > CSS

.x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
    background-size: contain !important;
    background-position: center center !important;
}

The background no longer moves with blank spaces since the aspect ratio didn’t match. And you can remove this after you check it.

The solution for this is, add more space between the HAT and image’s edge/border. Design elements or elements that needed focus shouldn’t be added as the background, or perhaps, design elements should be put to the center.

This is a good example, http://img.phombo.com/img1/photocombo/6247/HD_Cars_Wallpapers_HD__1920x1200__www.HQPictures.tk_Col1-9.jpg_Cars_Wallpapers_16.jpg, the car is in the center leaving more space below and above. This one is really good in parallax.

Thanks!

[nillamary]

This reply has been marked as private.

[nillamary]

This reply has been marked as private.

[Lely]

Hello There,

Please do resize the image so we can see the comparison. You may use this :https://tinypng.com/

[nillamary]

This reply has been marked as private.

[nillamary]

This reply has been marked as private.

[Christian]

There is no way to maintain the integrity or as I understand, the aspect ratio, when you’re using it as a background because there are many different screen sizes. If you want all parts of the image to display, use the Image element. Otherwise, you’ll need to find third party solutions or custom development.

Thanks.

[nillamary]

One of the reasons why I chose X is that it is a ‘Responsive theme’. However, your comment above is stating that it isn’t a responsive theme. Which is correct? I’m confused now.

Many thanks.

[nillamary]

Hi Christian,
In view of all the info, what exactly does the 1500 x 750 displayed in X’s Home page mean? I took this to be the exact size of an image to upload so that the parallax effect flows properly.

[Joao]

Hi There,

X is a 100% responsive theme.

Use Jpg instead of png you will be able to compress much more.

I usually go for 1600px width.

Hope that helps

Joao

[nillamary]

Hi

I am using jpgs in my Media library. The pngs above are screenshots for this Support ticket only.
The image that was cut is 1600px width. I’ve tried a couple of different images and sizes, but still X cuts about 4 inches from the bottom of the image.

Any other ideas?

[Rad]

Hi there,

No matter what image you use, it will still be clipped because it’s a parallax. It’s done by parallax alone regardless of image size, even if you change your image size, it will still the same.

1. If you upload a 1600px image, expect to only see 1400px
2. If you upload a 2000px image, expect to only see 1750px
3. If you upload a 960px image, expect to only see 840px

As what I’m saying, parallax will try to scale the image up and do the clipping, it’s not actually cropped, it’s only clipped and it’s only negatively positioned so when you scroll, it will move from negative offset to 0 offsets. If you force the image size to be the same as container size, then it will not move as you scroll. Because effects are only noticeable if there are changes from value to another value.

And aspect ratio and container size have a very big role when calculating the image size. You can’t just add 1600px and expect the container to be 1600px as well. Or add 1400px and expect all other calculation will follow along. Parallax is a library, and it’s not just about image hence, you’ll have a hard time finding the solution if you’re going to stick with just the size.

Please check this https://www.dropbox.com/s/krquguu9fnjwxr0/parallax%20explained.jpg?dl=0 ( you may download it if it’s unreadable through dropbox )

If you wish to follow maintain your image size, then you can disable the parallax and I can provide the CS needed so the container will follow the size of your image (originally, it should be the background that should follow the container size).

If you wish to maintain the parallax, let’s say you prefer 1600px then you could do this

1. Find the aspect ratio of your container (example, let’s say the container(eg. section’s total size) has 1800×500)
2. Then the base size of your image will be 1600×444 ( http://andrew.hedges.name/experiments/aspect_ratio/ based from 1800×500 )
3. Considering that parallax position it about 12% to 25%, then you can experiment with your image canvas size ( 1600×444 + 25% )

1600 + 400, 444 + 111 = 2000×555

4. Then increase your image canvas to 2000×555. Do not increase the image size, just the canvas size, increasing the image size will increase everything including all design elements. Design element should remain on its original size and in the center. Example, you can increase Grandpa’s background while making Granpa’s size the same, and make Grandpa positioned to the center.

Thanks!

[nillamary]

Hi Rad,

Thanks for the in-depth explanation and support, which I need to explore further.
If it’s too hard to get the effect I need with the images I’ve chosen then I may need to change themes.

Thanks again. 🙂

[Joao]

You are welcome.

Joao

[nillamary]

Rad, you advised above:
1. Find the aspect ratio of your container (example, let’s say the container(eg. section’s total size) has 1800×500)

So is the Ethos container 1500×750 as displayed in my Home page?

[Author]

Posts