How to make a background image static in Helix Ultimate

Hello Matt,

Thanks for reaching out to us.

Could you please share a screenshot where you want to apply this?

I would be happy to assist you.

Best Regards,

Hi Matt,

If we talk about background image set in:

1. Helix Template Options > Body (tab) > Boxed-Layout - just select "Fixed" in Attachment (field)
2. Section (SP Page Builder) > Style (tab) > Background there is also the same option like above.

If you thought about something else, more details are needed. Share link to screenshot, video or add a few words more.

I am sure it is possible what you asked without using "top secret" CSS hacks.

It depends how you set it? Or not set it yet?!

Look at my point 1. (above)

In that case you have to use Custom CSS and your CSS skills (basic level) ;]

Example for component area:

#sp-main-body {
    background-image: url('your-image.jpg'); /* replace with your image full path */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover; /* optional: covers full screen */
    background-position: center; /*  centers the image */
    }

for mobile (stuborn iphone) view, I recommend adding also that:

@media screen and (max-width: 680px) {
#sp-main-body {background-size: auto;}
}

or by template options > layout > component