How can I use an image for the header background

If you do not know what a White Label is, check out the article What is Travelpayouts White Label.

This article will describe how to put your own image in the header of your White Label, for example:

1. Open White Label settings in your Travelpayouts account by launching the Aviasales or Hotellook Tools tab.

2. You can add the image using one of the options:

  • add a <style> tag to the Site header block of the Sections tab and place the code below in it.

  • insert the code in the Styles tab in the Customize CSS Styles section.
    The second option is convenient because you will be able to keep all styles in one place and the Sections tab will not be overloaded with code. Also, in this option, you do NOT need to add a <style> tag.

The code:

<style> 
body .TPWL-template-wrapper .TPWL-template-header,
body div.TPWL-header-content {
background: rgba(0, 0, 0, 0);
}
body {
background-image: url(https://cdn.travelpayouts.com/marketing/kit_travel/bg-slide-1.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
}
.TPWL-widget--serp .filters_layout { background-color: #fff !important; border: 1px solid rgba(0, 0, 0, .12) !important; border-radius: 4px !important; padding: 10px !important; } .TPWL-widget .search_results-wrapper #tpwl-subscription { margin-bottom: 20px!important; } .TPWL-widget .filters .only-button { background: 0 0!important; } .TPWL-widget .filters_layout>main, .TPWL-widget .slider_substrate::after { width: 200px!important; } .TPWL-widget .filters .right-text { background: none!important; }
</style>

Link to the image that will be used as the background in brackets after the url parameter. 

Note! The image should be accessible from the internet and should not be on your local computer only.