Trying to change banner image size (something to do with parallax?)

[Dan-Toast]

I'm trying to change the height of the banner image on this page:

info.charter-global.com

How to Assess My SR Need - A Guide

A quick guide to SR Standards - Published by Obexion Shutters and Charter Global

The issue I'm having is that I can adjust the size by changing the padding-top in .custom-banner-section, but then only the top of the image is showing.

I need to then change the size of the image (the next element down from <div id="jarallax-container-0) to 100%, in order for the whole image to display.

But I can't find where to change this ANYWHERE.

I can see that it's styled inline and isn't linked to a stylesheet but I've looked in the template, in the custom module, in the stylesheet and in the javascript file and cannot find where to change this.

This template was built by HubSpot but support couldn't tell me where to locate this so I'm hoping somebody can!

Thanks,
Dan

[cbarley]

Hey @Dan_Stilgoe, it looks like our Migration Techs have set up this background image using a plugin called Jarallax. It's a pretty cool plugin, but not abundantly clear as to how it works. From doing some digging, it looks like the way it works is that the plugin will take a look at the outermost div that has the background image stored on it (next to the data-jarallax attribute on that div) and it will check out the top padding and the background-image. Then it will generate that innermost div (inside the .jarallax-container-0 section) and apply the background image styles to this inner div, which allows it to control the nice parallax effect that you'd see if the page was a bit longer.

The height of that inner div that you see in the inline-styles is directly related to the .custom-banner-section styles. If you change padding-top to another number here: https://app.hubspot.com/beta-design-manager/2369546/code/6018816040#L366, you'll see that the inner div that has the height set in the inline styles section will reflect this number.

That said, it does not appear that we are able to edit the background-size property directly to change that to 100%. Instead, what we can do is overwrite it. You can try something like this:

.jarallax > div > div {
     background-size: 100%!important;
}

or to target only that specific jarallax section:

.jarallax-container-0 > div {
	background-size: 100%!important;
}

If you'd rather not have the parallax effect at all, you might want to remove the plugin entirely by removing it from the sidebar in your custom module here: https://app.hubspot.com/beta-design-manager/2369546/modules/6018740743