Cubender Help Center

Search our knowledgebase for your questions about Cubender.

Help Topics Style Background

Background

With Cubender, you can create amazing background styles by layering color, images and gradients.
Adding Background Images
You can use an image as a background for any element on your page.
  1. Start by clicking the "Add Background Image" button.
  2. A window will popup showing all the options for your new background image. Click the "Change Image" button to select an image.
  3. The file manager window will show. From this window, you can now upload an image or select an existing image from previous uploaded files. When you're ready, click the thumbnail of the image you'd like use as a background and then click "OK".
  4. A background will now be applied to your element. Once you've made all your desired adjustments, click the "X" to close the Background Image window.
Background Image Options
There are three options to adjust the placement of your background: Size, Position and Alignment.
  • Size: This option allows you to control how large your background will appear. The default option "Auto" will use the default size of your image. The option "Cover" will use a best fit approach to ensure your image covers the entire element. Finally, using the option "Defined", you can define an exact size by entering values into the "Width" and "Height" input boxes.
  • Position: This option defines how your background will behave. The available options are "Repeat", "Repeat Horizontally", "Repeat Vertically" and "No Repeat".
  • Alignment: This option defines where your background will start within the element.
Adding Background Gradients
You can also use a gradient as a background for any element on your page.
  1. Start by clicking the "Add Background Gradient" button.
  2. A window will popup showing all the options for your new gradient background.
  3. Once you've made all your desired adjustments, click the "X" to close the Background Gradient window.
Background Gradient Options
There are various options to control the look of the gradient including color and angle.
  • A gradient must have at least 2 colors. Change colors by clicking one of the small colored squares under the gradient bar and then clicking the color thumbnail from the window that pops up.
  • Add new colors by click simply clicking anywhere on the gradient bar.
  • Remove colors by clicking the small colored squares under the gradient bar and then clicking the remove icon from the window that pops up.
  • To adjust the angle of a gradient, simply click anywhere on the Angle selector.
  • To adjust the gradient type, make your selection from the "Type" combo box.
Once the gradient background window (or background image window) has closed, you will see that a background layer has been created. You can create as many layers as you wish and each layer will be stacked on top of each other. At any time you can reorder these layers by dragging and dropping. You can also hide a layer by clicking the visibility icon, remove the layer by clicking the delete icon, or change the settings of a layer by clicking the settings icon.
Fill Color
To add a solid fill color, click the "Fill Color" thumbnail. When a background image or gradient is applied, this may hide the fill color as fill colors are applied under these styles.
Parallax Scrollling
Parallax scrolling makes the background lock into place as the page scrolls giving an illusion of depth. To enable parallax scrolling, simply check the option. Next › Border & Corner
Getting StartedDiscover how you can start using Cubender today.How to BeginStarting from a ThemeStarting from a Blank SiteView AllEditorGet familiar with the Cubender editor.Basic OperationsDesign PanelAdding ElementsPreferencesResponsive ViewsPreviewingPublishingView AllElementsLearn about all the different elements you can add to your page.OverviewMedia ElementsStructural ElementsSocial ElementsForm ElementsSpecial ElementsView AllStyleLearn how to apply custom styles to any element.OverviewBackgroundBorder & CornerFontShadowText ShadowSize & PositionLayout & OrderPadding & MarginTransformTransitionView AllDashboardGet an overview of the Cubender dashboard.Website SettingsAdding a DomainAccount SettingsYour SubscriptionView AllSubscription PlansLearn about the different pricing plans we offer.VenusEarthSaturnJupiterView AllWhite LabelingLearn how to white label Cubender for your customers.Creating UsersCreating SubscribersView AllSupportIf you're stuck, we can help.Contact SupportVisit our BlogView All