A question was raised about background images for containers and I did a little research and it turns out the Avada developers have made some decisions that can cause some problems if you are unaware. Fortunately, these can be overcome with CSS. I would recommend submitting a feature request to fix these ( have submitted one).

By default:

  • All backgrounds use a background size of cover. No override in the settings
  • Background position is set for center bottom. This can be changed in the settings
  • Background repeat is set for no repeat. This can be changed in the settings.
  • Adding a parallax effect will override the position settings and revert to the default.

To demonstrate this I, chose a 1600 x 900px image from Unsplash. Photo by Simon Williams.

multicolored village wallpaper

In the following three examples I set the minimum container height to 400px. Since cover in the default, the image will maintain its aspect ratio. and as a result here will be some enlargement or shrinking of the image depending on the width of the screen.  The screen size will also determine how much of the image will be visible based on position. This sample the position is set to center top.

Same as above, but parallax (Fixed) applied. Ignores position settings.

Setting the minimum container height to 400px and the position to center center.

Setting the minimum container height to 400px and the position to center bottom.

Setting the minimum container height to 1000px, the image will be stretch to fit while maintaining the aspect ratio. Depending on the quality or size of your image could create an undesired result.

Using custom CSS on the container you can constrain the image to its original dimensions. This will resemble the default cover if the screen dimensions are smaller than the image size. With a minimum height of 1000px, the full height of the image will always be visible. I have added a colored background to the next two samples so you can see the container boundaries.

You may not see the correct positioning initially using the Avada builder, but once you hit save and reload, the positioning should be correct.

Copy to Clipboard

Using custom CSS on the container you can also set the image to be a specific size.

Copy to Clipboard