How to Add Background Images?

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 previous background color option now you can see 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 a new setting 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 –


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:

  1. After adding a background image, make sure to adjust the opacity of background color with color picker.
  2. 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.
Not the solution you are looking for? Check other articles, or open a support ticket.