Add white background to question block | Experience Community
Skip to main content
Solved

Add white background to question block

  • Oct 4, 2018 9:16 AM UTC
  • 12 replies
  • 162 views

Hello everyone, I have a question regarding the layout. For the entire survey, I added a picture as background. Now I would like to add a white background to each question block so that the question clearly sets itself apart from the background picture. In the end, it should look like this: ! Can anyone help with a custom code? Many thanks in advance!

Best answer by Anonymous

Hello @Melissa Add following code to custom css .Skin #SkinContent { margin: 0 auto; background-color: white; }
View original

12 replies

  • Answer
  • Oct 4, 2018 9:39 AM UTC
Hello @Melissa Add following code to custom css .Skin #SkinContent { margin: 0 auto; background-color: white; }

  • Author
  • Oct 4, 2018 9:55 AM UTC
Thanks so much!

  • Oct 19, 2018 10:33 AM UTC
Could you share how you add a background picture for the entire survey? Thanks!

  • Oct 19, 2018 10:37 AM UTC
> @JBM said: > Could you share how you add a background picture for the entire survey? > Thanks! Paste the following css in the "Look and Feel" -> "Advanced" -> "Add custom css" #SurveyEngineBody { background: url('YOUR_IMAGE_URL'); background-size: cover; background-repeat: no-repeat; background-position: center center; } .Skin #SkinContent { background:none; } .Skin .SkinInner { background: transparent !important; }

  • Oct 19, 2018 10:38 AM UTC
Thank you! And is it possible to add a backrgound pic to one block of questions only?

  • Oct 19, 2018 10:50 AM UTC
> @JBM said: > Thank you! And is it possible to add a backrgound pic to one block of questions only? Add the following code in the each question of block Or if you have multiple question on one page then paste the following code on only one question in js(onReady) jQuery("#SurveyEngineBody").css({"background":"url('YOUR_IMAGE_URL')", "background-size": "cover", "background-repeat": "no-repeat", " background-position": "center center"}); jQuery(".Skin #SkinContent").css({ "background":"none" }); jQuery(".Skin .SkinInner").css("cssText","background : transparent !important");

  • Oct 19, 2018 1:09 PM UTC
> @Shashi said: > > @JBM said: > > Thank you! And is it possible to add a backrgound pic to one block of questions only? > > Add the following code in the each question of block Or if you have multiple question on one page then paste the following code on only one question in js(onReady) > > jQuery("#SurveyEngineBody").css({"background":"url('YOUR_IMAGE_URL')", > "background-size": "cover", > "background-repeat": "no-repeat", > " background-position": "center center"}); > > jQuery(".Skin #SkinContent").css({ > "background":"none" > }); > > jQuery(".Skin .SkinInner").css("cssText","background : transparent !important"); It doesn't seem to work... I am adding the code on the HTML box of the question. Here's what it looks like: !

  • Oct 19, 2018 1:14 PM UTC
Hey @JBM Follow this link and add in onReady function

  • Oct 19, 2018 1:30 PM UTC
> @Shashi said: > Hey @JBM > > Follow this link and add in onReady function Ok it worked! 😀 But now we can't see the text on top of the pic: ! Any solution to this? Maybe adding a white box to the question?

Forum|alt.badge.img+5
  • Level 2 ●●
  • Nov 29, 2018 11:18 PM UTC
@Shashi , is there anyway to make the white box slightly taller and wider? I used the code you posted above, but now the white box stops right at the edge of the question which doesn't look right. So the corner of the next button meets up with the bottom right corner of the white box. I would like there to be some added white space between the NEXT button and where the white box ends.

  • Feb 12, 2019 4:28 PM UTC
Per Shashi's guidance, I added the code (below) to the custom CSS. However, the text of the questions is not black. The only way I have found to change the color is limited to the Foreground Contrast, where high results in white text in a white box, and low contrast results in grey text in a white box. code added .Skin #SkinContent { margin: 0 auto; background-color: white; }

Hi! How do I get the question container for just one question to be transparent and keep the remainder of the survey to have a white question container? I’ve managed to get them all to have a white container using “Look and Feel” but have no idea how to get just one question to have a transparent question container.