Astra version 1.3.0 and above provides a feature to add background images to various sections of the site.
You can enhance the design of the Body, Header, Content, Sidebar, and Footer of your website with this option. In addition to the previous background color option now you can see the background image option as well.
Where can I find the option?
From your WordPress dashboard navigate to Appearance > Customize and under various areas, you will find settings to upload background images
Where can I add a background image to Astra theme?
With Astra theme, you get an option to add a background image to following areas-
Background image for Astra Pro Modules
In addition to Body, Footer Widgets, Footer Bar section, you get an option for following modules of Astra Pro –
- Primary Header (?)
- Above Header (?)
- Below Header (?)
- Content (?)
- Sidebar (?)
Note: Background option might be visible only if you have Colors & Background module enabled from Astra Pro.
Options for Background Image
Background image option allows you to choose an image from media library or you can upload a new file. After uploading the image, click on More Settings option. Now you can set following CSS properties for the image –
- Repeat
- Background Image Position
- Background Size
- Background Attachment
You can adjust the background color overlay with color picker. A nice transparent layer of color above image will enhance the background image design.
Important Notes:
- After adding a background image, make sure to adjust the opacity of background color with color picker.
- Background applied to the body will not be visible for Full Width/ Stretched – Container Layout as in this layout width of the container is stretched to the fullest.