[Resolved] Section Background Positioning

[Unyte]

Is there a way to set the background image position when using sections with GP?

There doesn’t seem to be an option in the Section Settings (using Catalyst site theme), but the theme is injecting it as an inline style.

At present I have worked around this by putting background-position-y:bottom !important; in the CSS, but I hate using !important because that’s just bad coding practice.

[David]

Hi there,

the inline CSS is coming from the Parallax option being enabled. Without parallax there is no inline styles. So you could create a CSS rule – for example:

.bg-right-center {
    background-position: right center;
}

Then add the bg-right-center class to any of the Sections in the settings tab that you require.

[Unyte]

This sort of worked, but it’s generating some erratic behaviour… the image loads correctly, and renders with the correct background-y position. However, the moment I scroll, the image shifts to default “top” positioning.

[David]

As i said – if you have the Parallax option enabled in the Section Settings this will inline a background-position-y: #px; which is what gets adjusted as you scroll on to create the effect.

[Unyte]

Sorry – it was Autoptimize not deleting cache properly. Sorted it now.

[David]

Awesome – glad to hear you got it resolved.

[Author]

Posts