CSS - Configuring different background images to be displayed on the Welcome, Questions & Results Page

CustomStyle Sheet code allows you to make cosmetic changes to the overall look and feel of the content that you create using Outgrow. This document will help you in getting an understanding of how you can set up different background images for the Welcome Page, Questions Page, and Results Page in different design layouts.

Chicago Design Layout

Design Layout

CSS Code

Chicago

.V_3_5 .t1-landing {
background-image: url(image url here) !important;
}
.V_3_5 .t1-question {
background-image: url(image url here) !important;
}
.V_3_5 .t1-result {
background-image: url(image url here) !important;
}

London

.has-background-tint {background-image: url("image URL") !important;background-size: cover !important;background-position: center !important;}

Greek

.V_3_5 .t1-landing {
background-image: url(image url here) !important;
}
.V_3_5 .t1-question {
background-image: url(image url here) !important;
}
body .V_3_5 .page_1.t1-result,body .V_3_5 .page_2.t1-result{ {
background-image: url(image url here) !important;
}

Tokyo

.experian-outer.result-outer-scroll {background-image: url(""image URL"") !important;background-size: cover;background-position: center top;}
.inline-tablecell {background-color: transparent !important;}

Madrid

.V_3_5.template-five .t1-landing .landing-inner {
background-image: url(""https://cdn.filestackcontent.com/I8wbfwwTfOAmKHCLhrXr"") !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.template-five.V_3_5 .t1-question {
background-image: url(""https://cdn.filestackcontent.com/I8wbfwwTfOAmKHCLhrXr"") !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.template-five.V_3_5 .t1-result {
background-image: url(""https://cdn.filestackcontent.com/I8wbfwwTfOAmKHCLhrXr"") !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}

Stockholm

.V_3_5.template-six .t1-landing {
background-image: url(""https://cdn.filestackcontent.com/I8wbfwwTfOAmKHCLhrXr"") !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.template-six.V_3_5 .t1-question {
background-image: url(""https://cdn.filestackcontent.com/I8wbfwwTfOAmKHCLhrXr"") !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.template-six.V_3_5 .t1-result {
background-image: url(""https://cdn.filestackcontent.com/I8wbfwwTfOAmKHCLhrXr"") !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}

Seattle

Not Applicable

Venice

.template-eight .t1-landing .eight-inner-wrapper {
background-image: url(""https://cdn.filestackcontent.com/I8wbfwwTfOAmKHCLhrXr"") !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.template-eight .t1-question .eight-inner-wrapper {
background-image: url(""https://cdn.filestackcontent.com/I8wbfwwTfOAmKHCLhrXr"") !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.template-eight .overlay-outer-eight {
background-image: url(""https://cdn.filestackcontent.com/I8wbfwwTfOAmKHCLhrXr"") !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}

New York

Not Applicable

Paris

Not Applicable

Berlin

Not Applicable

Auckland

.t12 {background-image: url(""image URL"") !important;background-size: cover !important;background-position: center !important;}
.questionnaire {background: transparent !important;}

Feel free to reach out to us using our chat support or by reach out to us at [email protected] in case you have any questions or feedback and our team will be glad to assist you further.