> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://doc.ecomx.co/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Shine Image Banner ## About Shine Theme Image Banner The **Shine Theme Image banner** features a video at the top of your homepage. [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902584433/4fd25d6f75ced289982c7578ef14/ZBXg4iFl1ydWzMnnAZX8eb5pTDCYHZL7k3vifExAoU0FIHg3PHSwiauwpGwe5n2LVjghWh-oq4QlDrtCOE2SGsjd3AyrGSV6Ra1sWeb0hltibaLCkdaBlAN61LXLe3lCF3oJDw1h9o9_tM0D.png?expires=1792403100&signature=d48d64ebf8dd5e77c2e37c360e3810ad195d9445924a83e2dcb6c042475dbebb&req=dSknFMx2mYVcWvMW1HO4zeKbaWH5%2BAfUTfkmFN2TprOKQhkR6a8IHNu0Nk7Q%0AmKttTeNc7c%2FQ5svgyqQ%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/c/6/3/6/c63658fb443c4000/178c1dc7-1d8d-427f-9a84-b9eff0_wb00fu.png) ## Access Shine Theme Image Banner From any page in the Shine Admin Dashboard, click on the **Add section** button > Search for Image banner > Click on it to add the **Image banner** section to your page. [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902584465/6e48d7c5d78215cd434851465ddf/kfDsWkBR_TU3_hH8rrdVV3mW1gSwTooCKH3boOsozCAZ2r0a3PH-1q2OZvQENSNk3X74pQx8duu5_p2yGFCo3e7YN2q79R3G95kswWuZjYWXgqTDEk8ay8LDkiE9Gbz_aYyy_66DY5pd0z5t.png?expires=1792403100&signature=0c0c4f822f0a3c02b6ad708ac9c80b1fbcca94816cfc9a804f361ea5ce71443d&req=dSknFMx2mYVZXPMW1HO4zWWQnS5%2F9nMvWQvOCQjdbs7%2Bgok%2F8C7aWIchrOSM%0AhcNpZkzL%2Bw1qT5BDFj0%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/3/9/3/8/39380db9714ea200/b696ba1f-4857-4a6b-b806-fd1222_1itt15s.png) To configure the **Image banner** section, click on the section to access the configuration settings. [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902584489/b5a99639115cfde9a1e4458b341e/9Icj1OFVsek7Lh-uVVvrMxKAi4LAKDS03MlGIHfAc77HtkkHDTD42mKh163w02eKOJpupL9IN8INAxcx4OucU6uj_jwp0bUeg-Tb25jrTS6x1SsLmLmwhNLrgxpkikAfAnqgtzAUFvSBSbvJ.png?expires=1792403100&signature=4985e1f6e9ca2f15fe59f0090759efbfe87a595b35ad0a7eebb831492136d136&req=dSknFMx2mYVXUPMW1HO4zZpx9R0usOBSPchcj48364ML1QmVx6Nv6579CD0B%0AUNMZW1bbolIBFtHQiow%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/e/3/6/0/e3600ca460e0e800/6ca867cc-f21d-475e-95f4-2c75bb_1rcsdh0.png) ## General Under the Color Scheme, you can choose a specific scheme for the Image Banner section. To modify or add a new color scheme, go to Theme Settings > [Color](https://docs.saleshunterthemes.com/manual/shine-theme-settings/#color-schemes). [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902584512/4196c2b27d9419bd7ce9700afe65/HoWhUU4tQOMC0Ipkt4Yy8fcrQuGd6NH3NKt9Bf5OhMoeFBfjWoWUqAZ4UqwcFUa2q7DBG71VydrxkoqPUoI30yzenYfNehBhBaG9wqXMUmNK4opluC0znEp-oWBAKZIiiZERo59iSfFb2fJ0.png?expires=1792403100&signature=4597011ae8752c2bad9dc6fb8d44e1f12657d07c47a26aa21e0141fd14648d3f&req=dSknFMx2mYReW%2FMW1HO4zUIlOcvL9wh4gu3URgtVE5A0JAeX8xlKIaxawYNp%0A4EWScIH1XVN7idvcwKQ%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/3/f/8/1/3f81f8441462c600/dd182ada-719c-4fbd-93c4-e88238_trgzkf.png) ## Image In the Image option, click on the Select image to upload the background image and mobile background image. Or choose an existing image on the media manager. You can set background images separately for large screens and mobile. [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902584534/e9f700df93fc56e1939685cd9f44/oCXupCOwhLJ4CrAWZvjoTtKD4FEf2BcVicT7fFpTIHwjvdBAjObVwrXt3Aum8HtNhoOVj1b7pB30KQtfaYStuj8_-R_Yq4I322xMS9iZNa_LU4b-koVlNLcwxe5hNtFrB_40yI8TxjSSkM-.png?expires=1792403100&signature=c722ca439635fa7a6a95b1432b648ea596158f0b2b58b629bdfc74a2eca4429c&req=dSknFMx2mYRcXfMW1HO4zQv1IPpmqK0wP8F4OFSu%2BXtPZC9csUsSSGKDxgZ4%0AuKKZkDVdYXJjICmFKgU%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/9/a/2/9/9a298a355f8dc00/d1a90c77-7582-430c-90c3-a233e1_182ns3l.png) Note: You should use the background image with the same ratio for all slides. If you set the background image for the large screen and don’t upload the image for mobile screen, the mobile view will automatically inherit the image of the large screen. If you set the background image only for the mobile screen, the large screen will not inherit the image of the mobile screen. The recommended size for background images is **900x500px** and for mobile background images is **750x1100px**. ## Large Screen The section offers four height options to cater to your specific requirements. These options are reflected in the Section height option: * Adapt to content * 50% screen height: This option resizes the banner to fit the content. * 70% screen height: This default setting provides the highest-quality image display. * Fill screen: This option expands the Image banner to cover the entire page’s width and height. * Adapt to image: This option automatically adjusts the section’s height based on the background image’s proportions. [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902584561/75d7e9b16aa0075ec4156f344ebf/V5TjV5QsC9pIFepplT2oHtkuVQBFAIfDl6ZdA7X7-Skks2XCpBWtJJw5wdvtiNr_r5DRkLrCQdfoN31TklHRZCF3q1M0d3Q8fdLH8Hfn5lPH-MEhjfE3FGlM_LQSNFo1XENeT3dkUjIQoAUu.png?expires=1792403100&signature=c69eb9de7eb784f63f162b5b8beb16ee5d8ccb264486f5f220c0c800fd75fab3&req=dSknFMx2mYRZWPMW1HO4zU72tnSJGUpAr3DpARLY6y%2FZUDG72ANBsjrouE%2Fi%0AlHAZLlvSuhWedslClpY%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/c/c/f/5/ccf586732c6cd000/42ca3f40-317f-4c77-8e29-6a542f_19xyx90.png) Note: The Section height settings typically establish a minimum height for each section. This means that the actual height of a section may be greater than the specified value if its content exceeds the available area. You can adjust the position for the content of the section area, which can be changed at Content Position: * Top left * Top center * Middle left * Middle center * Bottom left * Bottom center [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902584591/91b0286b37ebc32b14571c4fa0da/G9g1D8fj88-qMu65-XVu-L_GMWEnlMW4mgQC2X9wFT_iycHqsfKLdfFkOLLDifligae4YnfCXvs2uGZzjh9Gfb2SLCLkhJRHNovhZ2g1ttC2HKNqLB5ZnP1qBbfqVR5YBLovGue7vp50fLrX.png?expires=1792403100&signature=fbe2a52a45a95a63652885644ef28dd7527222e30c01ca884813838d303e375b&req=dSknFMx2mYRWWPMW1HO4zQ2jWB15%2BXtWU45Lsh1JZgD9Uk5I0jmjYiLo8ezA%0A2rm%2FmCa1LCgrzlGBWNk%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/9/3/6/4/9364c4290aa78000/8b4f00cc-e143-4fdc-95af-71e413_cidc0y.png) ## Mobile screen You can set the banner height of the section for smaller screens, such as mobile devices, in the Section height option. The setting options are the same with large screen settings. [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902584613/118c720d3acb41e2a61879ae9b22/9wDPETiy23f0jjRmaaxBOYpFHCckjP1CEg_TltFv4sm4dfBABZ7a8c0PW0NS_gjrUUMU5DVwXmZ8Br7wGXmhaD-z72wKJHze10vivQ1_iNTQTQzL26xPIzJQ_Wx5zFXNJe7Sb4Xv0hXxGUtp.png?expires=1792403100&signature=7d50e499e24b07442f54bda743438c403f57b4b40dac33fb335b9579eb6939e5&req=dSknFMx2mYdeWvMW1HO4zfup6JzVVkGQREMvzVug%2FCR1CsRwVdT74segfhQb%0A8DbGQxASCCvvPwt%2Bvqg%3D%0A)](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902584613/118c720d3acb41e2a61879ae9b22/9wDPETiy23f0jjRmaaxBOYpFHCckjP1CEg_TltFv4sm4dfBABZ7a8c0PW0NS_gjrUUMU5DVwXmZ8Br7wGXmhaD-z72wKJHze10vivQ1_iNTQTQzL26xPIzJQ_Wx5zFXNJe7Sb4Xv0hXxGUtp.png?expires=1766660400&signature=3acdd2cca3121668488c3f41334c901e1e8de08041faf25062bc33c2d938b8c3&req=dSknFMx2mYdeWvMW1HO4zfup55jXUEKVREMv11%2Bm9R42zAnT34NFJmfUxzb5%0AVeX0%0A) ## Spacing The Spacing option will decrease the top/bottom margin of a section, thereby bringing it nearer to the sections above and below it. You can choose to customize the outer spacing top/bottom of the Image banner section. * Remove outer spacing top * Remove outer spacing bottom [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902584631/60d39b25633304df8f25e529537d/wAFDv9pp7E1Sm51Ka_aBCij_-IaQNtpwrEdD-SY0NyPdSrAmVUIXAT7UkcWiqXJj6H_hzvjDOHwMY9Ry8AhEJVkhM4HJaP48Uk6zbYTzGXNK6g1mfsF21k8GwrssuarhV2zhqwh47gkzdF2e.png?expires=1792403100&signature=c0b72dbe229ae4dbae9da5eb45cf0410f2148f78e2eb4f008a47a39040a86c99&req=dSknFMx2mYdcWPMW1HO4zV3T67sTxLgfTpYZza9ZXQzI1vzKhNpRcgJKs4lj%0A3zh8TwdNOClmbt2ploI%3D%0A)](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902584631/60d39b25633304df8f25e529537d/wAFDv9pp7E1Sm51Ka_aBCij_-IaQNtpwrEdD-SY0NyPdSrAmVUIXAT7UkcWiqXJj6H_hzvjDOHwMY9Ry8AhEJVkhM4HJaP48Uk6zbYTzGXNK6g1mfsF21k8GwrssuarhV2zhqwh47gkzdF2e.png?expires=1766660400&signature=d00a6802b1ecbbb5ebec0fdc8dd641ab19a02f3d7daef6dc6d784d5746335899&req=dSknFMx2mYdcWPMW1HO4zV3T5L8RwrsaTpYZ16tfVDbmFiCWhM5trijYEyNl%0AAnmf%0A) ## Custom color You can customize the colors of the **Mask overlay** by clicking on the color picker. You can adjust the Overlay opacity between 0 and 90. You can also customize the colors of the **Text overlay** by clicking on the color picker. [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902584655/5e71dbc73ea9daee89b5f5a8a723/lTPVKg7hNYNyPTVWDUm27UNzULpOv9sKPA6xbWR9FcdbvJ335vlAV_IzUKJKTu-A-oeDtxgFWG-s3nul4QOI9C1ecJo4NnoDiPgzjugQJRdc5fu8sO__w01rkxWlB-34aFjvpraMfXHwr4UZ.png?expires=1792403100&signature=a79ea4d5c090c9057c45c48e36be9f2a2e1fddd10e6115202edff120389f2144&req=dSknFMx2mYdaXPMW1HO4zSKwqJcliJg%2F1YOoUFJPHKlqPCkV6Kz8syOjj5Nl%0AeSlUJhNnlQhop8sU5Ek%3D%0A)](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902584655/5e71dbc73ea9daee89b5f5a8a723/lTPVKg7hNYNyPTVWDUm27UNzULpOv9sKPA6xbWR9FcdbvJ335vlAV_IzUKJKTu-A-oeDtxgFWG-s3nul4QOI9C1ecJo4NnoDiPgzjugQJRdc5fu8sO__w01rkxWlB-34aFjvpraMfXHwr4UZ.png?expires=1766660400&signature=d5412201ba474bc4be15bfa1bf1f0f8da64df63efaa97a405bd5bc4aa8ebf234&req=dSknFMx2mYdaXPMW1HO4zSKwp5Mnjps61YOoSlZJFZPgrzYFhIcnDpXsyFxu%0AP1cS%0A) The default color of the **Mask overlay** and **Text overlay** are transparent. ## Shine Theme Image Banner Blocks Configuration The Image banner section provides five block types: **Subheading, Heading, Description, Buttons**, and **Countdown timer**. To add blocks to the Image banner, simply click the **Add Block** button. [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902584674/423fd299e6fc5d791229e96477be/EMegU3D7QZo1xLhROUOS83xwm9YEWoSLb2lScXLAa7WK1maqo0QOb-9sVBNcIc3KVmJT-R1tsZFsyROdg4UhcqZKhaqDG0k3jZqN7nR1Za45vMCyLkvgzwkHyj3SUG1HdDmq240V2RA2jAdo.png?expires=1792403100&signature=fd56bb5c73068c0aab685a2b4d35a848aa0e5ae530970c47cc5aa335554b16c0&req=dSknFMx2mYdYXfMW1HO4zd8Tjwp0GYNBz6Cfq%2BgxlAghf%2Bl6AtKyxBdvPzBd%0AIoRUjvwULfO9Hlt1twI%3D%0A)](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1902584674/423fd299e6fc5d791229e96477be/EMegU3D7QZo1xLhROUOS83xwm9YEWoSLb2lScXLAa7WK1maqo0QOb-9sVBNcIc3KVmJT-R1tsZFsyROdg4UhcqZKhaqDG0k3jZqN7nR1Za45vMCyLkvgzwkHyj3SUG1HdDmq240V2RA2jAdo.png?expires=1766660400&signature=d7ad33dce1b7cd7ee48a7e1353a88ca768bea2d54712385bbd35bd57b54ab616&req=dSknFMx2mYdYXfMW1HO4zd8TgA52H4BEz6Cfsew3nTJyk1%2FU1a4PzpK0atF4%0AoYa0%0A) To modify an existing block, click on it to open the settings modal. For more details customization about Subheading, Heading, Description, Button, and Countdown Timer blocks, check out [Image Collage With Text](https://docs.saleshunterthemes.com/manual/shine-image-collage-with-text/#shine-theme-image-collage-with-text-blocks-configuration) article.