-
Posts
-
Hi Guys:
First let me say that, for the most part, I love the Enfold theme. I’ve checked out others and keep coming back to Enfold. However when it comes to working with color section background image placement and positioning, it drives me insane. Perhaps there are unwritten rules of thumb that I’m just not aware of, or some section of the knowledgebase I’ve missed. If so, if there are guidelines for placement, positioning, and image sizing for color section background images, please point me in that direction.
Figuring out what dimensions the image should be is always quite challenging as I’ve found no rule of thumb to apply. For instance I’ve found no accurate relationship between the height of a color section and the dimensions of the bg image that allow it to appear relatively consistent for various viewport sizes.
Ideally in most cases, whether the bg image is to be scrolled, fixed, or parallaxed, I’d like to be able to have the most important parts of the image always mostly visible. For example I’d like to be able to use a rule of thumb such as, “For these background image settings, always make sure the most important parts of the image are centered horizontally in the top 50% (or 30% or whatever) of the image.” That way larger screens may see more of the image, smaller, narrower screens may see less, but you could always keep the most important parts of the image in front of the viewer.
I’m sure you guys add/remove html elements depending of if it’s supposed to be parallaxed or not as that’s how parallax is created, right? This should be consistent whether it’s in mobile or desktop mode. However you also seem to apply the bg image itself to different elements depending on if it’s in mobile or desktop mode. This in particular makes it very difficult to try and adjust using my own CSS.
So I guess the main question here is, given certain color section height ranges and settings for bg attachment, bg image position, and bg repeat, are there any general rules of thumb to follow for suggested height and width of an image in order to keep some portion of the image always visible?
On a semi-related note, in the past I’ve resorted to using a full width slider (layer or easy) because when they adjust for screen width, all parts do so consistently, unlike the background image of a color section.
All input is appreciated.
Thanks!
Hey scotthco,
Thank you for using Enfold.
are there any general rules of thumb to follow for suggested height and width
allow it to appear relatively consistent for various viewport sizes.
Which “Background Repeat” option did you set it to? If you set it to “Stretch to fit”, consider resizing the background images based on the standard screen resolutions used nowadays but don’t expect them to look the same on different screen sizes because it has to preserve the images’ aspect ratio. If you’re fine with having gaps or spaces around your color sections then you can always set the element’s “Background Repeat” option to “Scale to Fit”. It will resize the background image and make sure that it is fully visible inside the container. We can also set the background size manually via css, so the image inherits the size of the parent container but the image will get distorted on certain screen sizes.
// https://www.w3schools.com/browsers/browsers_display.asp
On a semi-related note, in the past I’ve resorted to using a full width slider (layer or easy) because when they adjust for screen width,
This is a related thread: https://kriesi.at/support/topic/control-scaling-and-or-image-size-position-in-color-section-full-screen-slider/#post-1008700
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,
Ismaeland if you are a bit familiar with css – a container can have multiple images with different sizes and repeat options etc. pp:
https://webers-testseite.de/multiple-background-images/
The only thing you have to do is to have a custom-class to your f.e color-section.see tutorial on w3schools: https://www.w3schools.com/css/css3_backgrounds.asp
So I guess the main question here is, given certain color section height ranges and settings for bg attachment, bg image position, and bg repeat, are there any general rules of thumb to follow for suggested height and width of an image in order to keep some portion of the image always visible?
I just got a request from a customer asking just the same question. She wants to use the parallax effect but would like her image be shown just as she has uploaded it. Currently we are using 1920 x 300 px but no matter what we select in the color section – background section we only get a partial view of the image but not the full image.
What can we do?
Which would be the suggested image size to get shown as much of the image as possible?Hi tuxscde,
It’s not possible for all the image data to be visible when you are using images as backgrounds. Maybe you could try to add extra space around your images to see if that works? There is no image resolution which will guarantee that everything in the image gets shown unfortunately, unless you set it to not cover the container element.
Best regards,
Rikard
- You must be logged in to reply to this topic.