I had no idea it would be this difficult to work with images. I went with ThemeCo because I thought their system would make all of this easy. Why are the images “zoomed-in” on desktop (they’re huge) but on mobile they’re zoomed-out?
I have the bottom image code set to “70” and the upper set to “10” yet they appear to be the same size still? What is that code actually doing?
Hello @jhayles,
I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.
We use the
background-image: cover;which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.Yes we can use
background-size: 100% 100%;which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.Yes we can also use
background-size: 100% auto;but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.Or we can also use
background-size: contain;but then this is not a good choice because you will see white spaces around your image.
Be advised that the background image size depends on the height of the section which is also dependent on the total height of the row which in turn, also dependent on the total height of the column. This is why we add 70vh and vh means “Viewpoint Height”. You can check it more about it here: https://www.sitepoint.com/css-viewport-units-quick-start/
By the way, if you do not want the background image to zoom-in or zoom-out and you do not have any text contents on top of the background image, it is best that you use the image as an element inserted in the column. Having this way, the image will always display correctly depending on its dimension. If you want, you can give us access to your site so we can give you an example.
Hope this helps.
Thank you for the additional information. It helps me to understand a little better. The main thing I’m still confused on is what is the best, or recommended option, given there are many options to choose from? I tried the image as an element but it doesn’t cover the background the way the others do, so I’m not a fan of the way that looks.
I would be most grateful if you could log into the account and give me some examples, please! That would be great. I’ll send a secure note with my info…
Hey @jhayles,
I went ahead and logged in to your site. I created a test page using the image. Here are the things I did:
1.) I made sure to remove any top and bottom padding of the section element.
2.) I disabled the Global Container in the row settings. I set the width and maximum width to 100% as well.
3.) In the image settings, I set the width to 100%
4.) And then to force the image to always display fullwidth, I added an inline CSS in the image element settings:
$el img {
width: 100%;
}
You can save the section I created as a template so that you can use it whenever you want to create something similar. Check out the secure note for the URL of the test page.
Regards.
Thank you for the help. I think we’re getting close. However, there are still two issues:
-
Look at the screenshots (properly named). The images you did (labeled “not zoomed-in”) look much better and display higher image quality. I saved your setup as a template and inserted it into mine, then deleted the sections I originally created. However, when I visit my page the images are still zoomed-in. Again, the screenshots will reveal the difference.
-
Also, the Parallax feature is important to me, and I can’t find it with your new setup. How do I enable Parallax on the images again?
Hello @jhayles,
The parallax is not available when using the image element. The parallax effect option is ONLY available when you use the image as your section background image. And it is also the reason why the image looks like been resized or “zoom in/out” because of the parallax effect.
Kindly review these links to better understand parallax:
- https://www.wix.com/blog/2019/08/what-is-parallax-scrolling-explained-with-examples
- https://www.w3schools.com/howto/howto_css_parallax.asp
Thank you for your understanding.
Okay…so you’re saying that I can not have the Parallax feature without the images being zoomed-in on. Is that correct?
Hello @jhayles,
Yes, that is correct. Normally, a background image will try and fill the whole section. If the actual image dimension is larger than the section area, it is more likely that the image will be zoomed in. And for the parallax to happen, the image needs to be zoom-in so that as you scroll the page and the parallax takes effect, there is the illustration that some parts of the image were hidden away and will only be visible as your scroll up or down.
Hope this helps.
Okay. Now I’m trying to put it all back the way it was. I didn’t know that I would lose the Parallax feature. How do I make the Section element bigger so that more of the picture fits in there? When I tried to add it all back now the section element is small and only showing a small portion of the image…
Hello @jhayles,
Please click your column and then set the minimum height to at least 70vh.
Again, you can check it more about vh unit here: https://www.sitepoint.com/css-viewport-units-quick-start/
Thanks.
Sorry to be a pain, but it’s still not working correctly. I did the settings the same as you showed above and the top image is a different height than the bottom image. I want both images to be the same height. Also, the Parallax stopped working. What did I do wrong there?
Hello @jhayles,
I have changed the minimum height to 100vh and make sure that the background image has the proper setup.
The parallax is now working. Check the page again.
Thank you. But I don’t understand why the images are displayed a different height on mobile. Can you check the site on your mobile device, so you can see what I mean? The height of the top image is much taller on mobile…
Hello @jhayles
I checked your site on my phone it looks fine at my end. There might be cache issue at your end I would recommend you to clear your browser cache and then check it again.
Thanks
I’ve cleared my phone cache and restarted my phone, twice. The heights on the images are still different. See attached. And now that I’m looking at your screenshot it doesn’t look like the images are the same height either…
Hello @jhayles,
Remember that in the second section, we used the section background image and the column height is 100vh. In the3rd section, you are using the image element. Be advised that even if the image element is 100% width, the height will automatically adjust relative to the width. For example, if your image dimension is 1920x1200, on smaller screens, the image width will be equal to the browser width and the height will automatically adjust relative to the width. If you want the same height, you will have to use the same structure by replicating the 2nd section instead. To save us time, I went ahead and duplicated the 2section already. Again, since the image is used as a background section, it is not zoomed-in. Parallax is also working for the newly duplicated section. Feel free to remove the last section instead.
Best Regards.
I didn’t see the section that was still using an image. I deleted that one. It appears to be working the way I want now. Thank you for sticking through this with me. It’s still not doing exactly what I want, but I don’t want to pay for custom coding at this time.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.