Hi Oliver_Durcan,
Could you just add a CSS rule (Look & Feel -> Style -> Custom CSS) to the background of the page?
//* I think this is the correct scope for your problem
.SkinInner {
background: lavender;
}
If that isn't colouring the right element, you can try to find the correct class name by using the Inspect option in your browser.
Good luck!

Hi bgooldfed
Thanks very much for this. Unfortunately, this won't work because I am running a static theme which is controlled by the institution account I am making the survey with. Therefore, I cannot edit CSS.
Is there an alternative way to do this per block, instead of via CSS?
Thanks
Oly

Hmm, perhaps try adding this as Javascript for one of your affected questions:
document.body.style.backgroundColor = "lavender";

Therefore, I cannot edit CSS.

Hi bgooldfed
Thanks for getting back to me on this!
The second option shows some progress:
jQuery(".SkinInner").css("background", "lavender");
However, this doesn't change the whole background (I'm assuming this is something to do with the 'inner' part of the script?). See screenshot of the facial recognition test when scrolled down the full screen window:

Looks like you're close to solving this!
Seems like we do have the wrong class name. Maybe try ".Skin" and see how that goes.
Failing that, you can just find the correct class name by right clicking somewhere in that unfilled area and selecting "Inspect" in the drop down. It will bring up a new window with the source code of the page, and the element you've selected should be highlighted with the correct name.
eg:
Good luck!

Hi bgooldfed,
I am very close I think! I managed to make all the changes I need in CSS (below for reference):
.Skin .SkinInner{background: lavender; width:100%;}
.Skin #SkinContent{width:750px;}
There are two areas I am stuck remaining

1. I'm unsure how to remove the white space you can see in the screenshot. I have tried to edit the footer, but this just adds a detached lavender block at the bottom instead of filling all of the space. What I have achieved so far (with your help) is widening the question body background as far as possible, whilst ensuring the question content stays within 750px and not the whole screen. However, this doesn't go edge to edge, and creates the jagged layered boxes you can see. Any ideas of making this remaining white space lavender?


2. I have a logo (you can see it peeking through in the top left of the screenshot) with a white background on every page (so, black text, white background). Is there a way to overlay (this is the term I know from photoshop) this logo, so the white background vanishes, and only leaves the black text on top of the lavender background?

Hi Oliver_Durcan,
Great to see you're almost there.

1. I'm afraid my CSS isn't good enough to intuit what is exactly happening to your blocks at the bottom - my gut says that the div with the button (#Buttons) has a margin which is causing the white space on the edges, while the footer (looks like the correct id is #PushStickyFooter, not #Footer) needs to have its background set to lavender. So basically set the margin property to 0 for #Buttons and set the background for #PushStickyFooter like you have for the rest.


2. You're on the right track with the logo. You'll want to save it as a .png file with a transparent background. There are lots of tools to do this online, or you can use Photoshop or Paint.net or something to do it yourself.

Ran into the same problem and following these steps resolved the issue:

Look & Feel Menu → General → Header → Edit → Source → Paste the below code.

<style type="text/css">html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: ${e://Field/Brand_Color} !important;
  }

  .Skin, .SkinInner {
    background-color: ${e://Field/Brand_Color} !important;
    height: 100%;
  }
</style>

Note: My example utilizes an embedded data field that contains the Hex codes as mentioned in this thread: 

In that example they use an embedded data field called “Color1” where mine is “Brand_Color”.