Background image position of content band

[logoglo]

HI, see here:

WOIO | Women Operating in Opulence

On the header I have a content band at the bottom, with a repeating pattern with “background-position: bottom;” I want this to have no gap at the bottom on all devices, currently, on first load on the desktop there is a gap, and on an ipad portrait.

If you switch between sizes, you will see it acts strange.

Also, the button is meant to scroll down to the content below, works on a desktop, but please on an ipad, its acting very strangely, it doesn’t work, so you click and click, then suddenly it does, or its jerky.

While you are there too, I have padding top added to shift it all into position, but this becomes too big on a mobile, is there a more elegant way of centering the headers content?

Thanks.

[friech]

Hi @logoglo,

Thank you for writing in, it looks like you made the structure of your page complex than it should. That pattern background should be applied to the parent Content Band (not on a nested content band).

Please rebuild that section as a Global Block, and use the Global Block shortcode to add it on the page.

In the Content Builder you have the upper and lower layer background option, so you can have that overlaying background effect in just one section.

• 

The latest feature added on the Column is the Flexbox options. Now you can easily vertically and horizontally center your content.

• 

These tutorials will give you the idea of how the background layer works.

Working with Background Layers (Part 1)
Working with Background Layers (Part 2)
Working with Background Layers (Part 3)
Working with Background Layers (Part 4)

Thanks,

[logoglo]

I tried adding a class to the content band, then added this css:

.align-middle {
display: flex;
flex-direction: column;
justify-content: center;
}

But it doesnt do anything

So how about I have the padding different at different sizes? I tried this, but it didnt work…

.align-element{
padding-top: 150px !important;

@media screen and (max-width: 768px) {

.align-element{
padding-top: 50px !important;
}

[ruenel]

Hello @logoglo,

With content band, you will have a very limited control over the background image. We highly recommend that you follow the suggestion of @Friech in his reply above.

Thank you for your understanding.

[logoglo]

Thanks, I will give it a try

[logoglo]

Can you check out the other part though…

:Also, the button is meant to scroll down to the content below, works on a desktop, but please on an ipad, its acting very strangely, it doesn’t work, so you click and click, then suddenly it does, or its jerky.:

[ruenel]

Hello @logoglo,

I have tested the button on my phone and I could not replicate the issue. Can you please clear your browser cache in your iPad? Maybe use private browsing mode or incognito mode and test the site again.

Kindly let us know how it goes.

[logoglo]

Did you test on an ipad?

[christian]

Hey @logoglo,

I checked in iPad and it works. Since your page is image heavy however, you will need to wait for all images to load because if you don’t or click on the button immediately, it will scroll to the section but the scroll position would be updated because of the newly loaded images. This is not a theme issue but just a natural behavior of images in a web page. That best thing you could do is minimize the use of decorative images. Or, you should combine them with your background instead and ultimately, optimize of of your images in your site. Please read the Image Optimization section in our Performance Guide.

Hope that helps.

[logoglo]

Or I could load whatever script loads the button first, what script is it? Also, yes, there are many images on the page, but I have them lazy loading.

[christian]

Hey @logoglo,

Regretfully, we can’t provide the script as that would conflict cause conflict if added again and that would won’t fix the issue also. Lazy loading won’t have effect also or it might even be worsening the effect as some Lazy Load techniques even delays the display of images. As I’ve said, it’s the loading of the “above the fold” images that disrupts the scroll position. Please consider what I’ve advised and I’d just add that adding a min-height to the content band 1 might alleviate the effect. You can do it like this:

.home #x-content-band-1 {
    min-height: 80vh;
}

If that doesn’t work, please hire a third-party developer to create a custom solution for your setup.

Thanks.

[logoglo]

Thanks, I will give it a try, thanks for your help.

[ruenel]

You are most welcome!