Skip to main content
Nintex Community Menu Bar
Question

Background image for master page falling short

  • July 10, 2024
  • 5 replies
  • 17 views

Forum|alt.badge.img+10

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.skuid.com/t/new/add\_details?topic[subject]=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?

This topic has been closed for replies.

5 replies

Forum|alt.badge.img+1
  • Nintex Employee
  • July 10, 2024

Same deal here. Just checking to see if anyone found a solution for this.


annajosephine
Nintex Employee
Forum|alt.badge.img+18
  • Nintex Employee
  • July 10, 2024

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!


Forum|alt.badge.img+1
  • Nintex Employee
  • July 10, 2024

This worked! Thank you.


Forum|alt.badge.img+8

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.


Forum|alt.badge.img+8
  • July 10, 2024

Hi do you have any recommendation for the background image to use for the special effect?