--- title: Advanced Theme Builder Introduction description: "# Description ## Background Images [https://www.youtube.com/embed/oQMkl4NHse4?rel=0&enablejsapi=1](https://www.youtube.com/embed/oQMkl4NHse4?rel=0&enablejsapi=1) The Advanced Theme Builder allows you to attach background images to three different elements of your popup: the Popup Overlay, the Popup Container, and the Close Button. You can attach background images from the **Theme…" url: "https://wppopupmaker.com/docs/advanced-theme-builder/introduction-4/" updated: "2024-12-23" category: Extensions / Advanced Theme Builder --- # Advanced Theme Builder Introduction # Description ## Background Images [https://www.youtube.com/embed/oQMkl4NHse4?rel=0&enablejsapi=1](https://www.youtube.com/embed/oQMkl4NHse4?rel=0&enablejsapi=1) The Advanced Theme Builder allows you to attach background images to three different elements of your popup: the Popup Overlay, the Popup Container, and the Close Button. You can attach background images from the **Theme Editor** by selecting **Popup Maker** -> **Popup Themes** from the WordPress Admin, then clicking the theme you wish to edit. ![file 8ZnOsVdsOJ](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/57c17039c6979156e4f1e629/file-8ZnOsVdsOJ.jpg) # Background Image and Overlay Popup Elements ## Popup Overlay From the **Theme Editor**, look for the **Overlay Settings Pane**: ![file eI4L3camyl](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/57c1755fc6979156e4f1e631/file-eI4L3camyl.jpg)Under the **Background Type** setting, select **Image** from the drop down menu, and you will be presented with several options to customize the appearance and behavior of your Popup Overlay background image, plus a link to select the background image. Read the full details on these settings below. ## Popup Container ### Background Image From the  **Theme Editor**, look for the **Container Settings Pane**: ![file KUg5XYmyvB](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/57c1781b903360342852ea65/file-KUg5XYmyvB.jpg) Under the  **Background Type** setting, select **Image** from the drop down menu, and you will be presented with several options to customize the appearance and behavior of your Popup Container background image, plus a link to select the background image. Read the full details on these settings below. ### Background Overlay From the same **Container Settings Pane**, look for the **Background Overlay Settings**: ![file f7lSSDQEqO](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/57c28dc1c6979156e4f1e7d2/file-f7lSSDQEqO.jpg) By default, there is no **Color** selected and the **Opacity** handle is not displayed, but when you select a **Color**, the **Opacity Setting** will be displayed. ## Close Button From the  **Theme Editor**, look for the **Close Settings Pane**: ![file 0hO70m21n6](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/57c1793dc6979156e4f1e634/file-0hO70m21n6.jpg) Under the  **Background Type** setting, select **Image** from the drop down menu, and you will be presented with several options to customize the appearance and behavior of your Popup Close Button background image, plus a link to select the background image. Read the full details on these settings below. # Background Image Settings ## Image Clicking the **Select** **Image** link will allow you to upload your image or select it from your WordPress Media Library ## Repeat Choose from four different **Repeat Settings**: ### None This will not repeat your background image and will render it on the front it only once. ### Tile This setting will repeat your background image both horizontally and vertically, spanning it the entire width and height of the chosen popup element. ### Horizontal This setting will repeat the background image only horizontally, spanning it the width of the selected popup element. ### Vertical This setting will repeat the background image only vertically, spanning it the entire height of the chosen popup element. ## Position ![file OEEOdMVVCW](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/57c21d67c6979156e4f1e71a/file-OEEOdMVVCW.jpg) Choose from many different **Position Settings**, allowing you to customize where your background image will be rendered *within* the popup element chosen to have a background image attached. ## Attachment By default, all background images attach as **Scroll**. ### Scroll The **Scroll** background image setting means that when you scroll up or down, the background image will scroll with the popup element that has the background image attached. ### Fixed Setting the value to **Fixed** means that when you scroll, the background image will stay in the same position without moving along with the scrolling action. ## Size You can choose between three different **Size Settings** for your background image: None, Fit, and Fill. ### None The None setting keeps your background image it's actual image size. If the image is bigger than the element it is attached to, then those out-of-bounds portions won't be seen as they are outside the bounds of the element the image is attached to. ### Fit This setting will fit the image inside the element it is attached to. So, for example, if your image is bigger than the popup element it's attached to, then it will be scaled down so that the whole image is visible inside the popup element. ### Fill The Fill Setting will fill up the popup element with the image. If you had an image that was smaller than the popup element it's attached to, then you can use the Fill Setting to make the image take up the whole popup element. Obviously, this would cause your background image to become pixelated, but can still be handy nonetheless.