Documentation
HomeForumHelp
  • About Cwicly
  • Beginner's Guide
    • Install Cwicly
    • Getting Started
      • Overview
      • Settings
    • Edit and Manage your Site
    • The WordPress Dashboard
    • The Dashboard Menu
    • Site Editor
    • Create your Front Page
      • Front Page
      • Header
        • Header Template Part
        • Structure
      • Footer
        • Footer Template Part
        • Structure
  • ⚡Cwicly
    • Block ID
    • Breakpoints
    • Class
      • Global/Block Classes
    • Cloud Design Library
      • Create an Account
      • Overview of the Cloud Dashboard
      • Editor: Cloud Library
        • Access from the Editor
        • Add a Library
        • Switch between Libraries
        • Default Library
        • Download Library
        • Remove Library
        • Categories
          • All
          • Popular
          • Button
          • Composition
          • Decorative
          • Interactive
          • Layout
          • Media
          • Menu
          • Social
      • Design Blocks: Cloud Library
        • Search for a Design Block
        • Refresh
        • Add Design Block
        • Save Design to Library
        • Remove Design Block
      • Library Globals
        • Library: Global Styles
          • Library: Add Styles
          • Installation: Add Styles
          • Library: Style Settings
        • Library: Global Classes
          • Library: Add Classes
          • Installation: Add Classes
          • Library: Class Settings
        • Library: Global Stylesheets
          • Library: Add Stylesheet
          • Installation: Add Stylesheet
          • Library: Stylesheet Settings
        • Library: External Classes
          • Library: Add External Classes
          • Installation: Add External Classes
          • Library: External Classes Settings
      • Community Library
        • Save to Community Library
        • Download from Community Library
        • Remove from Community Library
        • Set Community as default
    • Colour Picker
      • Gradient Builder
    • Components
      • Components Library
      • Components Folders
      • Settings
      • Component Properties Modal
      • Properties (Add)
        • Text Property
        • Rich Text Property
        • List Property
        • Link Property
        • Image Property
        • Gallery Property
        • Video Property
        • Icon Property
        • Colour Property
        • Toggle Property
        • Number Property
        • Class Property
        • ID Property
        • Options Property
        • Conditions Property
        • Visibility Property
        • CSS Text Property
    • Copy/Paste
      • Block Styles
      • Classes & IDs
      • Dynamic Preview
      • Global Styles
      • Global Classes & Stylesheets
      • Blocks
    • CSS Grid
    • Dynamic Inserter
    • Font Manager
    • Navigator
    • Quick Inserter
    • Scaling
    • Smart Inserter
    • Span
    • Tag
  • ⛵Tailwind
    • Getting Started
      • About
      • Activate
      • Copy/Paste
      • Enable editing mode
      • Apply a Class
      • Pseudo state Management
      • Automatically Sync
        • Breakpoints
        • Colours
      • Shells
      • Custom Tailwind Configuration
      • Import Tailwind Plugins
  • 🖌️Themer
    • Themer
      • Templates
      • Parts
      • Fragments
    • Role Editor
      • User Role
      • Gutenberg Editor
      • Global Block Behaviour
      • Block Toolbar
      • Miscellaneous
      • Components
      • Code Block
      • Blocks
      • Post Types
      • Force iFrame
      • Client Canvas View
      • Help
      • User
  • 🌐Global Styles
    • Global Styles
      • Global Colours
        • Folders
        • Colour tab
        • Palette tab
        • Modifiers tab
          • Opacity
          • Lighten
          • Darken
          • Saturate
          • Desaturate
          • Spin
      • Dark Mode
      • Global Gradients
      • Global Typography
      • Global Block Typography
      • Theme Elements
      • Global Settings
        • Defaults
        • Backend
      • Remove Gutenberg Global Styles
    • Global Classes & Stylesheets
      • Global Classes
      • Global Stylesheets
      • External Classes
  • 🎨Design
    • Background
      • Background Colors
      • Background Source
      • Sizing & Positioning
      • Styling
    • Typography
      • Typography
      • Rem conversion
      • Global Typography
      • Text Align
      • Font Family
      • Font Size
      • Font Weight
      • Spacing
      • Line Height
      • Style
      • Decoration
      • Transform
      • White Space
      • Overflow Wrap
      • Word Break
      • Word Spacing
      • Axes
      • Text Colour
      • Link Colour
    • Fluid Values
    • Layout
      • Display
      • Visual
      • Position
    • Sizing
      • Height
      • Width
    • Margin & Padding
    • Borders
      • Border
      • Shadows
      • Outline
    • Effects
      • General
      • Transitions
      • Animations
      • Filters
      • Text Shadow
      • Tilter
      • Separators
    • Transforms
    • Pseudo Classes/Elements
    • Relative Styling
  • 🎓Advanced
    • Custom CSS
    • Quick Code
    • Scrolling
      • Animate On Scroll
      • Scroll Direction
    • Attributes
    • Tooltip
      • Source
      • Theme
        • Custom Theme
  • 👆Interactions
    • Visibility Conditions
      • Blocks
      • Themer
    • Link
      • Link Source
      • Link Action
    • Interactions
      • Trigger
      • Actions
    • Hover Animation
    • Dynamic Slider
      • Settings Tab
  • 🖥️Editor
    • Inserter Panel
    • Quick Insert
    • Block Inspector
    • Primary Tab
    • Design Tab
    • Advanced Tab
    • Responsive Selector
  • 🔧Blocks
    • Accordions
    • Accordion
      • Basics
      • Settings
      • Colours
      • Layout
      • Typography
      • Margin and Padding
    • Button
      • Add
      • Icon
    • Code
      • Enable/Disable
      • Add
      • Languages
      • Settings
    • Columns
      • Basics
      • Add
      • Settings
      • Grid Editor
        • Auto Grid
        • Auto Template
    • Column
    • Container
    • Div
    • Filter
      • Basics
      • Filter Editor
      • Create a Filter
      • Style a Filter (example)
    • Fragment
    • Gallery
      • Filter
      • Source
      • Settings
      • Text
      • Image Style
    • Heading
    • Hook
    • Icon
    • Image
      • Source
      • Size
      • Settings
      • Hover Animation
    • Input
      • Input Settings
    • List
      • List Types
      • Settings
      • Icon
    • Maps
      • Settings
      • Size
      • Style
      • Overlay Layout
      • Colours
    • Menu
      • Settings
      • Main Menu
      • Sub Menu
      • Items
    • Modal
      • Modal Style
      • Settings
      • Trigger
      • Animation
    • Nav
      • Nav Block Settings and Styles
      • Nav Items Block
      • Nav Dropdown Block
      • Nav Link
      • Custom Dropdown Block
      • Nav Menu
    • Post Content
    • Paragraph
    • Popover
    • Query
      • Query Settings
      • Query Editor
        • Posts
        • Terms
        • Users
        • Comments
    • Query Template
      • Layout
      • Grid editor
    • Repeater
      • Nested Repeater
    • Section
    • Slider
      • Settings
      • Navigation
      • Dots
    • Slide
    • Styler
    • SVG Block
    • Tab List
      • Tab
    • Tab Contents
      • Tab Content
    • Taxonomy Terms
    • Video
      • Source
      • Settings
      • Div Overlay
  • ⚙️Settings
    • Settings
    • License
    • Icon Collections
    • Font Sets
    • Google Maps API
    • Advanced Settings
    • Regeneration
    • WooCommerce
  • 🛒WooCommerce
    • Archive Page
    • Attributes
      • Colour Type
      • Image Type
    • Cart
    • Product Variations
    • Create a Product Type
      • Simple
      • Variable
        • Create Attributes
      • Grouped
      • External
    • Build a Single Product Page
    • Dynamic Content
    • Link
  • 🗃️Miscellaneous
    • Blocks Specifics
    • Icon Selector
    • Trailing Slash
    • Units
      • Default Units
    • Code Snippets
    • Shortcuts
    • Actions
    • Filters
    • Browser Console
  • 🔗Resources
    • Changelog
    • Roadmap
    • Forum
Powered by GitBook
On this page
  • Background Image
  • Add
  • Source
  • Static
  • Remove URL
  • Dynamic
  • Data
  • Unset (Data)
  • Reset Unset
  • WordPress (Data)
  • Featured Image
  • Author Picture
  • User Picture
  • ACF (Data)
  • WooCommerce Featured Image
  • WooCommerce Gallery Background Image
  • Background Video
  • Add
  • Source
  • MP4 Link
  • Youtube Background Video.
  • Image Placeholder
  • Background Colour
  • Cover Area
  • Loop

Was this helpful?

  1. Design
  2. Background

Background Source

Last updated 2 years ago

Was this helpful?

The Background Source property defines the type of background applied to a block, either an image or a video.

Background Image

Defines the background as an image to ensure the image is displayed properly even at constrained proportions.

Add

  • Select a block.

  • Open the Block Inspector.

  • Navigate to the Design Tab.

  • Open the Background Tab.

  • Find the Source Tab.

  • Find the Type property.

  • Select the Image icon.

Source

The Background Source property allows you to define the source for the background image, either static or dynamic.

Static

The static Image property means that the selected image relies on manual changes. To select a static image you can Click 🔍 (Browse) or copy/paste a URL.

  • Select a block.

  • Open the Block Inspector.

  • Navigate to the Design Tab.

  • Open the Background Tab.

  • Open the Source Tab.

  • Find Image.

  • Click to select.

  • Find Source.

  • Select Static.

  • Select image by clicking 🔍 (Browse) or copy/paste a URL or Click "Set Image".

  • Select Image and click Select button.

  • This is how it should look.

Remove URL

  • Select a block.

  • Open the Block Inspector.

  • Navigate to the Design Tab.

  • Open the Background Tab.

  • Open the Source Tab.

  • Find Source.

  • Click to select.

  • Find Image.

  • Click to select.

  • Find Source.

  • Select Static.

  • Find Image URL property.

  • Click dot to remove.

Dynamic

The Dynamic Image property means that the image can be dynamically set with Wordpress or ACF. It can change depending on different parameters available or set at the time, making it update automatically.

  • Select a block.

  • Open the Block Inspector.

  • Navigate to the Design Tab.

  • Open the Background Tab.

  • Open the Source Tab.

  • Find Image.

  • Click to select.

  • Find Source.

  • Select dynamic.

Data

The Data property allows you to choose where your Data comes from such as: Unset, Wordpress, ACF.

Unset The Data source has not been set.

Wordpress The Data is coming from a Wordpress source.

ACF The Data is coming from an ACF (advanced customs field) source.

  • Select a block.

  • Open the Block Inspector.

  • Navigate to the Design Tab.

  • Open the Background Tab.

  • Open the Source Tab.

  • Select Image.

  • Choose Dynamic Source.

  • Select required Data in dropdown (unset, Wordpress, ACF, WooCommerce).

Unset (Data)

The Dynamic Data Source is not set. You can input or search for a fallback URL which allows you to have a fallback image rather than an empty space. You can also modify the image position.

  • Select a block.

  • Open the Block Inspector.

  • Navigate to the Design Tab.

  • Open the background tab.

  • Open source tab.

  • Find Image.

  • Click to select.

  • Open Source tab.

  • Choose dynamic.

  • Find data.

  • Choose unset in dropdown.

  • Input or 🔍 (search) fallback URL.

  • Select Image fallback.

The fallback image will only show on the frontend and only if there is no imput data.

Reset Unset

  • Click dot to reset.

WordPress (Data)

When Dynamic Data Source is set to Wordpress, you can add an image in your Post, such as Featured Image, Author Picture, User Picture.

  • Select a block.

  • Open the Block Inspector.

  • Navigate to the Design tab.

  • Open the Background tab.

  • Open Source tab.

  • Choose Inage.

  • Set Source to Dynamic.

  • Set Data to WordPress.

  • Set WordPress to Featured Image, Author Picture, User Picture as required.

Featured Image

Allows you to add an image that visually represents a post or page on your website as a background image.

  • Input or 🔍 (search) fallback URL.

Author Picture

Allows you to add an image of the author as a background image to a post or page.

User Picture

Allows you to add an image of the user as a background image to a post or page.

ACF (Data)

When Dynamic Data Source is set to ACF, you can add dynamic data to your background image.

You need to have created an ACF group in the Custom Fields in the Dashboard menu.

  • Select a block.

  • Open the Block Inspector.

  • Navigate to the Design tab.

  • Open the Background tab.

  • Open Source tab.

  • Set Type to Image.

  • Set Source to Dynamic.

  • Set Data to ACF.

  • Select required ACF Group in the dropdown.

  • Add required ACF Field.

  • Add a Fallback Image as required.

WooCommerce Featured Image

Allows you to add a Featured Image as a background image for your product.

You will need to have already set up a Product Image in the edit product page of the Products tab in the WordPress Dashboard Menu.

Remember to find and select the required product in the Dynamic Preview.

  • Select a block.

  • Navigate to the Design tab.

  • Open the Background tab.

  • Open the Source tab.

  • Set Type to Image.

  • Set Source to Dynamic.

  • Set Data to WooCommerce.

  • Set WooCommerce to Featured Image.

  • You should see the Featured Image appear in the thumbnail.

WooCommerce Gallery Background Image

Allows you to choose a particular Product Image from your WooCommerce gallery as a background image.

You need to have previously created a Product Gallery in the edit product page of the Products tab in the WordPress Dashboard Menu.

Remember to select the required product in the Dynamic Preview.

  • In the Source tab of the Background tab in the Design tab,

  • Set Type to Image.

  • Set Source to dynamic.

  • Set Data to WooCommerce.

  • Set W. to Gallery Image.

  • Set Index to deserved Gallery Image number.

Background Video

The Background Video Property allows you to add a Background Video to your block.

Add

  • Select a block.

  • Open the Block Inspector.

  • Navigate to the Design tab.

  • Open the Background tab.

  • Open the Source tab.

  • Set Type to Video.

Source

The Source property allows you to select the source of your background video. You can choose between an MP4 link or YouTube.

  • Select a block.

  • Open the Block Inspector.

  • Navigate to the Design tab.

  • Open the Background tab.

  • Open the Source tab.

  • Set Type to Video.

  • Find Source.

  • Toggle MP4 link, YouTube.

MP4 Link

This allows you to insert an MP4 file as a background image.

  • Click Search Icon to open the Media Upload panel.

  • Select required MP4 video.

  • In the Upload Media window, click "Select File".

  • Sectle mp4 file and click "Select" button.

Youtube Background Video.

The Youtube Background Video property allows you to add a Youtuve Video as a Background Video to your block.

  • Open the Design tab.

  • Open the Background tab.

  • Open the Source tab.

  • Set Type to Video.

  • Set Source to YouTube in the dropdown.

  • Input YouTube video URL.

  • The video should appear in the editor as a background once the URL has been added.

Image Placeholder

The Image Placeholder property defines the image that will be used as a placeholder before the video is loaded and played. You enter an URL or browse to select an image from the library.

  • Select a block.

  • Open the Block Inspector.

  • Navigate to the Design Tab.

  • Open the Background Tab.

  • Open the Video Tab.

  • Find the Image Placeholder property.

  • Enter the desired URL or Click Browse.

  • Or select an image from the WordPress Media Library.

  • Click "Select Files".

  • Select media file and click "Select".

Background Colour

The Background Colour property defines the colour that will be applied to the video container before the video is loaded and played.

  • Select a block.

  • Open the Block Inspector.

  • Navigate to the Design Tab.

  • Open the Background Tab.

  • Open the Video Tab.

  • Find the Background Colour property

  • Open the Colour Picker.

  • Select your colour in the colour picker or click on a global colour

  • Click dot to reset

Cover Area

The Cover Area property defines the size of the background video.

When activated, the background video will fully cover the width and height of the background area without distortion.

When deactivated, the background video will adapt to the size of the background area without distortion.

  • Select a block.

  • Open the Block Inspector.

  • Navigate to the Design Tab.

  • Open the Background Tab.

  • Open the Video Tab.

  • Find the Cover Area property.

  • Toggle on/off.

Loop

The Loop property allows you to play the video in a loop.

It is enabled by default.

Toggle Loop on/off as required.

🎨