How to Add Background Colour for a Container

Add depth and structure to your layout with container background colours.
This guide walks you through the steps to apply a solid background colour to an entire container. Learn how to access container settings, choose your preferred colour, and enhance your design with clean, custom styling.

Frequently Asked Questions

How do I add a background colour to a container in my document?

Open the document editor and select the container or row you want to style. Open the container settings or style panel and locate the Background section.

Choose the Colour option, pick a colour from the palette or enter an exact hex or RGB value, then save or apply the change to set a solid background colour for the entire container.

Can I use a background image instead of a solid colour?

Yes. Switch the Background setting to Image and upload an image from your device or choose one from QuoteCloud's built-in Unsplash library.

After choosing an image you can set fit and position options and apply overlays or opacity controls so the image integrates cleanly with your layout.

What controls are available for background image opacity and why should I use them?

Opacity controls let you reduce the visual prominence of a background image so foreground text and elements remain readable. Typical controls include global opacity, semi-transparent colour overlays, and blend or tint settings.

Use lower opacity or a subtle overlay for backgrounds that should not compete with content; increase opacity for decorative sections. Adjust until contrast and legibility are clear across devices and screen sizes.

What styling options can I apply to a container background?

You can apply a single solid colour (via picker or hex/RGB), or a background image with controls for fit (cover, contain), position, repeat, overlay colour, tint and opacity. Border radius, padding and spacing are often available at the container level to complement the background style.

These options help build visual hierarchy and consistent section styling across quotes, proposals and other documents.

How can I ensure text and foreground elements remain readable over a background image?

Check and improve contrast by adding a semi-transparent overlay, lowering image opacity, or using a darker/lighter text colour with sufficient contrast ratio. Place important text in a plain-colour sub-container if necessary.

Always preview on multiple screen sizes and run an accessibility contrast check when the document will be used as part of sales quoting software or sales proposal software to ensure every recipient can read the content.

Can I enter exact colour values like hex or RGB, and will they carry across templates?

Yes. Most editors let you paste exact hex or RGB values into the colour input so you can match brand colours precisely. Saved colour values can be reused in templates and themes to keep consistent branding across quotes and proposals.

For enterprise use, save your brand palette in the template or theme settings so your quote software or proposal software outputs remain consistent every time.

How do background colours help in sales quotes and proposals?

Background colours add depth, guide the reader's eye, and create clear sections such as pricing, terms, or feature highlights. Using consistent background styles improves document clarity and reinforces brand identity in your quote software or proposal software.

Well-styled backgrounds also make it easier for prospects to scan and understand key information, reducing friction in the sales process.

Troubleshooting: My background colour or image didn't apply — what should I check?

First confirm you selected the correct container and saved or applied changes. Check for nested containers or columns that may be covering the element you styled. Clear your browser cache or do a hard refresh to rule out caching issues.

If an image does not display, verify file size and format, and confirm there are no permissions or upload errors. If problems persist, export or preview the document and contact support with a screenshot and the document name.