Background image for master page falling short

  • 2
  • Question
  • Updated 2 years ago
  • Answered
I've created a master page with a sticky header and footer and a top nav bar, and it's working well on all its child pages (some great new tutorials on this stuff, Team Skuid - nice work!).

I want to set a background image on the master page using a parallax effect. So I went to the master page, edited page properties and set the background image with these settings:

background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-color: transparent;

But when I look at the child pages, the background image is dependent on the amount of content in the page, instead of covering the full height of the browser. If the page is short because there's not much content, the background image falls short. E.g.:

A page with a long table of records displayed gives a full background:https://community.skuidify.com/skuid/topics/new/add_details?topic%5Bsubject%5D=background+image



Whereas a page with only a small amount of content gives a partial background:



How can I get the background image to span the full browser height every time?
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb

Posted 3 years ago

  • 2
Photo of Blake Curtis

Blake Curtis

  • 268 Points 250 badge 2x thumb
Same deal here. Just checking to see if anyone found a solution for this.
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
Hi guys, the best way to do this is set page height to 100vh (100% of screen height) in Page Style Properties. You will have to add the height attribute. From there, you can determine how the image is placed using the Size and Position Attributes under Background.



Let me know if this works for you!
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
One quick change I'd make to this is to use "min-height" instead of "height". That way If your page gets taller than the height of the viewport, you won't get an unwanted scrollbar.
Photo of Blake Curtis

Blake Curtis

  • 268 Points 250 badge 2x thumb
This worked! Thank you.
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,032 Points 2k badge 2x thumb
Hi do you have any recommendation for the background image to use for the special effect?