CSS - Configuring Different Background Images on the Welcome
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.
Updated 6 months ago