This can be useful when you want to add a text to the container. If you take a look at the front end of the site, with the default Divi header, you can see that the header has a background color of white. That would be a great addition. You may also like to read How to change background transparency Without Affecting Child. It would be great to have the option of a transparent header for selected pages – an option available on each page (or post). To make the Background Transparent and float it into position with Divi Switch, navigate to the back end of your website, hover over the Divi menu and click the Divi Switch tab. if have any questions, feature requests, or have used Divi Switch and just want to sing its praises, share it in the comments below. Simple toggle controls – don’t forget to click save 🙂. In the CSS, you can set the background-image directly in the parent element, with no opacity change. But as of Divi 4.0, doing this with the default Divi header controls takes a few additional steps and some settings finagling. It uses the CSS RGBA color property to apply the opacity effect to the background. Find tips and examples of using CSS opacity property right here. If you want to use the CSS opacity property, you have to use the below-given example. Boring 😉. Add a transparent background to the text and give a look and effect on your content. To use it, go into the "Design" tab of the slide you wish to add a background to. If you want the header to be transparent on all your pages, toggle the  Transparent header for all pages on as well. Online tool to make image transparent. Whether you set transparency for either the home page or alternate pages or both, you’ll certainly create some interesting aesthetics for your site. In addition to above all, if you want to make a transparent background only on hover. If you have any query regarding the tutorial, please comment below. The above example using the transparent color background to display the image. Once you’ve accessed the Divi Switch panel, you should, by default, arrive on the first tab – Header. If you haven’t already added Divi Switch, it’s your time to upgrade and speed up development. If your hero background image is light, you will need to go back to the Theme builder to make the text and link colors of your menu readable. However, it applies the effect on hover to the div element. Back in the Theme Builders Header editor, under the Section settings > Advanced option, change the position from Relative to Absolute. If you use the opacity property, the text is also slightly visible to the viewers. Before we begin, as I mention in the video, you CAN make the menus transparent by dragging the opacity in the background colors down to zero on the Primary Menu Bar, Secondary Menu Bar and Fixed Navigation Settings under the Header & Navigation settings in the Theme Customizer. Required fields are marked *. One of Div’s quirks is the section background image settings. For this example, we’ll just add the primary menu and set a logo with Menu module. The default background color of a div is transparent. With CSS2, you can set a color and an image on your div background. There you'll find a … However, you have to use the opacity property of CSS to give a transparent background. To tile the background of a Divi Section module simply add the following CSS to the Main Element section of the Custom CSS tab of the module you’re working with: Alternatively, you can simply set the background of a Row Module to the image you want to use, and set the Make This Row Fullwidth to Yes. How to Create Image Hover Overlay Effect Using CSS. This website is not affiliated with nor endorsed by Elegant Themes. Now copy and paste the following CSS into your child theme stylesheet, Divi options custom CSS box or the page specific CSS box.The CSS has comments so you can see what each section is doing. Any divs on a page can have their own background image. It seems you cant have stick to top and absolute options selected and this work? This also depends on the theme you are using, to add the image we will add a section of full width and we will place the image as a background. Where you can change the transparency of the menu via Theme Customizer One more thing you have to note here that. To put a background on your div, you have to use the background CSS property. If you are using Transparent Headers as a global setting with both light and dark images, you may need to adjust the menu and logo colors for each page. This is how you set a static home page in WordPress. Once you’ve accessed the Divi Switch panel, you should, by default, arrive on the first tab – Header. The release we got some really good feedback and people seem to really like it so we are going to show you how to do it. Kevin on October 30, 2017 at 5:00 pm Worked great. Here you’ll find all of the customizations related to the header. It’s that easy. Example. The one on the left is for the actual color, and the one on the right is the opacity. We will send you a link to download layouts.  You will also get notified about the future giveaways!Â, © 2015 - 2020 Divi Space (An Aspen Grove Studios Company), How to Create a Transparent Header With Divi. Add a transparent background to the text and give a look and effect on your content. As always, we want to hear from you. To add color in CSS, use the property rgb (). If you just want your element to be transparent, it’s really as easy as : background-color: transparent; But if you want it to be in colors, you can use: background-color: rgba(255, 0, 0, 0.4); Or define a background image (1px by 1px) saved with the right alpha. Does the plugin resolve this? If you want to make the text background visible to the visitors to display the back image. Now let’s look at how Divi Switch can save you time by letting you do the same thing with a toggle. Thanks to these two awesome switches, you can quickly and easily create visually engaging effects for your Divi header. Now, when you go to the other pages on the front end of your site, you’ll see that they have the same transparent header that is on the home page. It uses the opacity property to make the above div slightly visible to the viewer. A slightly transparent black when it’s on a white background is simply a dark gray, but turns into a dark blue on a blue background. Don’t forget to check out our other Switch tutorials, like how to lower your bounce rate with a custom 404 page. This obviously takes a few extra steps, but it will get the job done. Thanks for this tutorial! However, it does not allow you to set any transparency which is needed in order to create the desired effect. Easier Background Management. Creating a transparent header on your website is a smooth little design styling trick for seamlessly layering your logo and menu items over a hero image or mega slider. The back part of the background is still slightly visible to the viewer. However, the opacity property may affect the inner element of the div also and make them transparent too. Divi Switch is an expansion pack plugin with +50 handy switches for adding one-click style changes and extending the functionality of the Divi theme and builder. You may also like to read How to change background transparency Without Affecting Child. Previously, these options for background colors, images and videos, including sub-settings for parallax modes, background image and video sizes and color transparency were found in one big long list inside of the Design tab. Here, the color red will be transparent. Scroll down to the “Transparent header for the homepage” switch, click to enable, and save. Now you’re almost there. How To Make Background Color Transparent In CSS, ../../wp-content/uploads/2018/10/best-ide-text-editor.jpg, ../../wp-content/uploads/2018/05/stop-accidentally-publish-post-wordpress.jpg, .main-divhover:hover .transparent-bghover, How to change background transparency Without Affecting Child, Make Background Color Transparent Using CSS RGBA, Transparency Background Color on hover Effect Using CSS. Another really cool thing you can do with opacity and transparency is add text in a transparent box, probably to offset a really harsh or dark background image like in our example below. The " a " is for the transparency: