Color Section vertical fixed size issue with a background image

Here is what we settled on, hopefully this can serve as a guide for the rest.

If you have a crisp high-res images, be prepared to give up on image quality, Color Section background will not truly scale image as responsive so it is better to size the image closer to the height you want displayed. If this is a deal breaker look into using a Slider element.
—————————————

So, if you need only a background image that somewhat scales without getting your image cropped out here are the settings.
Note that we had only 2 lines of text on top of image background, as H1 and H2 so this will influence your sizing of image and padding.

-LAYOUT
Section Height: No min. height (apparently min. height is an issue on Mac browsers??? so we had to use padding)
Maring and Padding: No Padding (custom css will be used since you can’t really tell what size are presets)

-STYLING
Background Image: Actual Image heigh of 338px
Background Attachment: Scroll (fixed and parallax – neat effects but horrible scaling, don’t bother)
Background Image Position: Center Center (adjust this depending on where the focal point of your image lands)
Background Repeat: Stretch to Fit (sadly your crisp image will get pixelated, ‘Scale to fit’ shows the best quality but it gets ‘inserted’ and does not scale down on mobile…AT ALL)

-ADVANCED
Developer Setting > Custom CSS Class: bg-image (name it what you like, this will be your css class and where the sizing of “height” will come in play)

In your Enfold Child Template add quick CSS:

/* --- Color Section background images --- */
.bg-image .template-page {
padding-top: 120px;
padding-bottom: 120px; 
}

—————————————

Padding values are an estimate of = text on top of image + padding value = close to actual height of your image.
In hour case H1+H2 + total of 240px of padding = image height of 338px;

Best of luck!

• This reply was modified 4 years, 4 months ago by biotechz. Reason: formatting