A color, gradient, or image can set an important section apart. Global CSS is strictly a last-resort tool for rules that standard controls do not offer.
What you will learn
- Apply solid color, gradient, or image backgrounds.
- Save custom gradients for reuse in your workflow.
- Distinguish between local element styles and global CSS.
- Respect security and export limitations regarding images.
Choose the simplest suitable background
A solid color background provides maximum legibility and optimal loading speed. A linear gradient transitions color along a straight direction, while a radial gradient radiates from a specific point. An image can add atmosphere, but it must maintain strong contrast against text and should never serve as the sole carrier of critical information.
Start inside the inspector for the selected row or module. This confines your adjustments strictly to the targeted element. Reserve global CSS exclusively for rules intended to apply across multiple sections that cannot be expressed via tokens, skins, or standard controls.
You can also select top or bottom row dividers for layout sections.
Practical workflow
- Select the target element and open its background settings.
- Test a palette color first. For gradients, set two or three complementary shades along with a direction angle.
- You can save well-crafted gradients to your local catalog (up to 24 custom gradients supported).
- When selecting background images, source them through the Image Bank to construct a safe reference path.
- Ensure text legibility, applying a subtle color overlay if necessary. Check crop behavior on mobile screens.
- Add global CSS only after verifying selector scope. Save and inspect multiple sample page types, not just the active block.
Global CSS has a broader impact
An incorrect or overly generic rule can break multiple modules, so make incremental adjustments in small steps.
Saved gradient and color presets reside in the specific browser's localStorage, while actively applied values save directly to the template configuration. Pay close attention to export boundaries: local and preview media files are not copied into the generated ZIP archive. The export process substitutes them with placeholders, which you must replace with actual media on your target Joomla environment post-installation.
An image preview is not a bundled file
The Image Bank aids in layout design, but it does not generate a portable photo asset repository. Prepare final images and verify licensing independently prior to publishing on the destination site.
Backgrounds and performance
A large background image can quickly become the heaviest asset on the initial screen fold. When preparing production media on the destination website, use optimized dimensions and modern formats while preserving sufficient quality for large displays. Avoid stacking multiple heavy photographic assets purely for decorative purposes.
Animated backgrounds or intense visual effects can distract visitors; supported motion features honor reduced motion system settings. Critical text must never rely on underlying animation or specific regions of a photo. Always verify that a section remains fully legible via a fallback background color should image rendering fail or be disabled.
Before adding global CSS rules, consider whether the same result can be achieved through design tokens, the floating inspector, or element skins. These native tools operate within narrower scopes, making errors far easier to identify and isolate.