Articles on: Common Styles

Background Styles

Getting Started



You can change the visual appeal of your website with customizable background styles. This article will guide you through adding background style options like solid colors, gradients, images, and videos in sections, containers, and elements.


Background Styles



The Background feature offers four different options. Here they are:




📌 Note: Background options vary depending on whether you are customizing a section, container, or element. Not all features are available for every component.


1️⃣ Solid Color Background



This option allows you to apply any solid color as the background. Refer to the GIF & screenshots below:










2️⃣ Gradient Color Background



This option lets you select and customize various gradient colors for the background. Refer to the GIF & screenshots below:

☑️ Gradient background Color feature comes up with 3 options which are Simple, Advance, and Library.




Simple:



This option allows you to select and customize two gradient colors, specifying the start and end colors from the palette. ⬇️





Advance:



Advanced Gradient Color Picker lets you choose multiple colors and use various types of gradients. ⬇️




Library:



You can choose your Global Gradient colors from this option to use it ⬇️




Global Gradient Colors


3️⃣ Background Image



To add any image as a background image you can use this option. For the visual demonstration refer to the GIFs and screenshots below:


Upload image:



You can upload any image to set it as the background for your section, container, or element.







Image Library:



You can also select an image from your site's Image Library. Click the Upload Image button, navigate to the Image Library tab, hover over your preferred image, and click the Insert button.




Generate Images with AI:



You can generate background images using Dorik AI. Click the sparkle (✨) icon next to the image URL option, select the image type and size, and provide the details of the image you want. Once the image is generated, hover over it and click the Insert button to use it as your section background.





4️⃣ Background Video:



You can add videos as a background. The supported video formats are MP4 and WEBM.







Related Articles




Changing Site language

Site Settings

Updated on: 02/06/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!