Introduction
Astra allows you to add background images to various sections of your website. This feature gives you full control over the design of the Body, Header, Content Container, Sidebar, and Footer. Beyond standard solid colors, you can utilize background images or gradients.
Where to Find These Settings
Navigate to your WordPress Dashboard and go to Appearance > Customize. Inside the Customizer, you will find background settings across different sections.
Available Sections for Background Images
Depending on your license (Free vs. Pro), the available modules vary.
With AstraPro
- Body: (Global > Colors > Site Background | Content Background)
- Sidebar: (Sidebar > DESIGN > Background)
- Header Builder: (Above Header | Primary Header | Below Header | Off-Canvas Menu | Primary Menu > DESIGN > Background)
- Footer Builder: (Footer Builder > DESIGN > Background Color & Image | Above Footer | Primary Footer | Below Footer > DESIGN > Background)
With Astra Free:
- Body
- Primary Footer
- Above Footer
NOTE:
The “Background” option is only available if the Colors & Background module is enabled in Astra Pro settings.
Background Image Settings
The Background Image parameter allows you to select an image from the Media Library or upload a new file. Once uploaded, click More Settings to configure specific CSS properties:
- Repeat
- Background Image Position
- Background Size
- Background Attachment
Color Overlay
You can adjust the background color overlay using the color palette. Applying a semi-transparent color layer over the image enhances readability and design flexibility.
Layout Limitations
Please note: A background applied to the Body container will not be visible when using the Full Width / Stretched Container layout, as the content container expands to fill the entire width.
Important:
After adding a background image, always adjust the background color opacity via the color palette to ensure text contrast.
