-
Posts
-
Hello!
I am having an issue with controlling the scaling and position of images and was wondering if you could help me figure out a solution.
I have pasted a URL for the site I’m working on in the private content section for your reference.
The main issue I’m having is that I need the entire *height* of the photo to show, while still maintaining the parallax effect.
For example, if you check out the fullscreen slider, you will notice that slide 2 crops out part of the woman (normally her boots, depending on the size of the screen you are using). However, I would like the entire height of the image to display so that the woman stays on the screen completely.
As a second example (probably requiring a different solution), if you check out the color section before Bio – the same thing happens… the woman normally gets cut off at the knees. I need the entire height of the photo to show.I am hoping there is a css trick I can use to do it in both cases. If not, I could also resize the images if you could help me figure out how to size them properly.
Thanks so much for your help!
JohnUpdate: I have been playing with the issue all afternoon trying to figure it out… and I think I have at least part of the solution.
In the case of the fullscreen slider, I have noticed that no matter how I move and adjust the image (mocked up in Photoshop), I cannot accomplish what I am trying to do. There is not enough photo outside of my friend to resize the image the way she wants.
I believe the same holds true for the color section.. but with the color section, she is OK if people have to scroll down the page for it a little bit if allows for the full height. I have set the container height to 100% for the color section… but it’s not quite enough. Is there a way to set the container to a size greater than 100%? Maybe 130% or something?
Thank you so much for your continued support!
Hi,
the woman normally gets cut off at the knees. I need the entire height of the photo to show.
That is not possible without distorting the image. Please note that the images in the slider are set as background and they are automatically resize to keep their aspect ratio. You can replace the Full Screen Slider with the Fullwidth Easy Slider if you want the whole height of the images to be displayed but please note that the Fullwidth Easy Slider does not inherit the height of the browser view port unlike the Full Screen Slider.
Best regards,
IsmaelHi Ismael,
Thank you for investigating the issue. I understand that this issue cannot be remedied on the fullscreen slider. I used Photoshop to update the image to get the aspect ratio I need for the image in the fullscreen slider.
The image I am still having trouble with is in a color-section. If you use the link in the private section of this post, and select ‘Bio’, you will be taken to the bio. I am looking to make the change to the image directly above this section (the woman with the tambourine).
When I replace the color section with the full-width easy slider as you suggested, I am able to get the entire image to appear – but I lose the parallax effect.
I would like to have that entire image display – with a parallax effect when the bio section slides up over it. Is there a way to get a color section to display the entire image as the background, while maintaining the parallax effect?
Your help is greatly appreciated. Thank you again for the outstanding support you guys provide for users.
JohnPlease note, I provided the wrong URL in the private content section. Please see the link attached to this post.
Thank you!
JohnHi,
Is there a way to get a color section to display the entire image as the background,
This is the same case as the full screen slider. The background image will not be fully visible inside the background positioning area (color section container) because it has to preserve the aspect ratio. You can set the color section’s “Background Repeat” settings to “Scale to fit” to display the whole image but you’ll probably get white spaces or gaps around the container. We can also set the background size to 100% via css but it will distort the image on certain screen sizes. Unfortunately, the Fullwidth Easy Slider has no parallax effect option because the images are not used as background.
If you want to learn more how css handles background images, please refer to the following link.
// https://www.w3schools.com/cssref/css3_pr_background-size.asp
Here’s how those background size property translates into the theme:
cover = “Stretch to fit”
Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edgescontain = “Scale to fit”
Resize the background image to make sure the image is fully visibleBest regards,
Ismael
- You must be logged in to reply to this topic.