-
Posts
-
Hi team!
I have been dealing for some days with this problem and I cannot figure out a solution.
I hope you can help me.I have one page with a Color section Area set to “Section Minimum Height: 320 px”
I have another page with a Color section Area set to “Section Minimum Height: 160 px”I want a parallax effect, and the rest of the options are the same for both:
* Background Attachment: Parallax
* Background Image Position: Centered
* Background Repeat: No repeat
* Section Padding: noI have an image with 1500 pixels width. I want the image height to be the minimum one to get a small image size and a parallax effect that not shows my image distorted.
I have been trying different image heights, for instance:
-for the section with height=160 px, I assign an image 1500x400px.In a desktop screen 2560×1440 the image an parallax looks OK, but in a screen 1440×900 the image looks distorted (is bigger and right and left side are cropped)
Why?I know that if I put a huge image parallax will work fine, but I am looking for the minimum image size in order to speed up the pages loading.
How can I know which is the right minimum image height that is good for a certain height of a color section with parallax?
In my case, what would be the minimum image height for a Section Minimum Height: 320 px and the one for a Section Minimum Height: 160 px?
Thanks in advance
RosaHello!
Does anyone have any suggestion to solve my question?I would like to put my site on production soon and I am investing lot of time trying different sizes of images and I cannot figure out a rule that works for any screen resolution (or at least the most common ones) using the minimum image size.
Thanks for your help!
RosaHey!
Thank you for using Enfold.
The parallax effect may vary on different screen resolutions so it’s up to you to decide which works best for your site. I think 2560 × 1440px is not a common resolution for monitors. According to StatCounter, the most used resolution is 1366 x 768px so working on screen resolution between 1920 × 1080px and 1600 x 900px is your sweet spot.
To give you a better idea, I think we should look on the demo site. Check the parallax section at the very bottom of this page: http://kriesi.at/themes/enfold/homepage/home-v8-frontpage-shop/
This is the background image: http://kriesi.at/themes/enfold/files/2013/06/slide3_bg.png
And if you check the “A Beautiful Experience” section in this page: http://kriesi.at/themes/enfold/homepage/home-v9-videos-and-parallax/
.. this is the background image that is being used: http://kriesi.at/themes/enfold/files/2014/02/photodune-2708157-meat-balls-m-1000×1500.jpg
As you can see, the image sizes are completely different but it kind of work well with the page. Don’t get caught up with the “right” height or width of the background images because there is none. It’s actually a hit and miss experiment. Regarding the image cropped, it’s because the background size property of the parallax container is set to “cover” which means that it will:
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
This will also keep the aspect ratio of the images.
Regards,
IsmaelHi Ismael
Thanks for your response.
I agree that I have to think in designing for the most common screen resolutions, as you said. And I am trying to find the minimum image size that looks fine in the 4 or 5 most common screen resolutions for my two color area of 160px and 320px.
However in the ENFOLD examples you mentioned the images look blur, and I would like my images to look sharp and full width without distortion and without using huge images.
You say that parallax “…scale the background image to be as large as possible so that the background area is completely covered by the background image”
In screen resolution of, let’s say, 1440×900 px, I see looking at the code that in a page with a color area set of 160px size, the window that shows the image background mesures 1423x160px and the
div.av-parallax. avia-full-stretch.active-parallax mesures 1423x553px.Is this 1423x553px the size of the background area you are refering before?
Can I use this background area size to calculate the minimum size needed for my background image in this particular screen resolution?
(For instance, If apply this relation 1423/553=2.57 to my background image of 1500 px wide, I get 1500/2.57 = 583px.. So my image of 1500px wide should have at least 583px height to fit without distortion a parallax color area of 160px in this screen resolution)
Could this be a way to do the calculation?)Thanks!
RosaI am having the same problem, I also want my pictures to look sharp and full width without distortion.
Hey!
Use images with larger resolution and size if you think the background is a little bit blurry.
Is this 1423x553px the size of the background area you are refering before?
Yes, that is the calculated size of the background container. Note that the height will also depend on the content inside the container. The more content, the taller the container.
Best regards,
Ismael
- The topic ‘Which is the minimum image height for a certain parallax window height’ is closed to new replies.