How To Make A Background Image Static In Helix Ultimate - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer

How To Make A Background Image Static In Helix Ultimate

MH

Matt Hunt

Helix Framework 3 months ago

Trying to keep a background image from scrolling. There must be a setting for that, but can't seem to find it.

0
8 Answers
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 3 months ago #197083

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,

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 months ago #197098

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.

0
MH
Matt Hunt
Accepted Answer
3 months ago #197131

Hi, I'm talking about the background to the entire page, not just the background to a section. At the included url, it is the gradient green/black background that I need to keep from scrolling with the page.

Thanks,

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 months ago #197133

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

Look at my point 1. (above)

0
MH
Matt Hunt
Accepted Answer
3 months ago #197136

I'm not using the boxed layout in Helix Ultimate and in SP Page Builder I see where I can make the background of different sections fixed, but I don't see where for the entire page.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 months ago #197137

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

0
MH
Matt Hunt
Accepted Answer
3 months ago #197138

Got it, thanks. And now that I realize the term that I was missing from my thinking was "Attachment" I see that you already have an option for that without having to use custom css. In Helix Ultimate's Layout / Main Body / Row Options / Style / Attachment. Sorry for wasting your time, when it was right there in front of me

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 3 months ago #197141

You’re welcome!

If you believe your issue has been resolved, please feel free to mark this as complete.

Thanks again!

0