Help Topics › Style › BackgroundBackground
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.
- Start by clicking the "Add Background Image" button.
- A window will popup showing all the options for your new background image. Click the "Change Image" button to select an image.
- 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".
- 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.
- Start by clicking the "Add Background Gradient" button.
- A window will popup showing all the options for your new gradient background.
- 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
Facebook
Pinterest
Google
Terms
Privacy