Customizing the background of a 1/1 column section with a transparent .png image

you can do that very similar to the footer – via the pseudo-container : before

i give a custom-class to the column it belongs to: background-outside
thats what the effect will be. And because that is impossible we transfer the background-image to its pseudo-container:

Setting is that you put in that container a background-image ( your grass – in your case now a white silhouette of grass )
because we do not want to see on page generation a background-image on the column itself we set it to size : zero

.flex_column.background-outside {
  background-size: 0px !important;
}

.flex_column.background-outside::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  background-image: inherit !important;
  background-repeat: repeat-x;
  background-position: top left;
  visibility: visible;
  top: -60px;
  background-size: auto 80px;
}

the shifting of 60px to top ( -60px ) had to be less than the height of the background-image ( here : 80px )

see: https://enfold.webers-webdesign.de/ryan2/

ps the next examples are made with a custom divider – the first on the column and the last on the color-section before
and because the dividers always face inwards, it was not trivial to orient them outwards in the case of the column.

The image solution – but what if you like to have an image as background for the whole color-section area – where do you insert it in the alb? this is possible by css – to have multiple background-files : https://webers-testseite.de/multiple-background-images/
but had to be done in quick css for each section.

the alternative solution:
Enfold offers the option to have those dividers on color-sections and on columns.
One difficulty is to have this “border-styling” outside the container – and for columns this is the fact then.

how to have custom svg files as dividers? https://kriesi.at/documentation/enfold/columns/#adding-custom-svg-dividers

i do prefer the custom path to those svg files because i do organize my media library not per year and month. So all media are inside uploads folder.
Maybe a mod or a dev can tell us how to use the path independet solution with the attachment id ?

go to the example page again and see last color-section with the links of the two grass files. https://enfold.webers-webdesign.de/ryan2/#av_section_5
you can download them : open and then save page

this snippet is for making the uploads folder the folder for custom svgs:

function my_svg_path(){
  $path = get_site_url().'/wp-content/uploads';
      return $path;
}
add_filter( 'avf_custom_svg_shapes_files_directory', 'my_svg_path', 10 );

and now to register the custom svg files with their options:

function custom_avf_custom_svg_shapes( array $custom_shapes ) {
$custom_shapes = array(
	'grass'		=> 	array(
				'key'			=> 'grass',
				'title'			=> __( 'Grass', 'avia_framework' ),  // this notation with avia_framework offers the possibility to translate to other languages
				'has_width'		=> true,
				'has_flip'    	=> true,
				'attachment'	=> 1,
				'filename'		=> 'grass'
				),

	'grass-semi' => array(
				'key'			=> 'grass-semi',
				'title'			=> __( 'Grass Semi', 'avia_framework' ),
				'has_width'		=> true,
				'has_flip'    	=> true,
				'attachment'	=> 2,
				'filename'		=> 'grass-semi'
				),

	);
return $custom_shapes;
}
add_filter( 'avf_custom_svg_shapes', 'custom_avf_custom_svg_shapes', 10, 1 );

now you got on your color-section ( and colums too ) on layout – svg-dividers the chance to insert your own custom svg:

why?

• download those two svgs. Link on my page.
• Upload them to a subfolder of your uploads folder called: avia_custom_shapes )
• copy the second snippet
• paste it to your child-theme functions.php
• goto the color-section open the tab on layout : svg-dividers
• choose for your bottom divider that grass-semi ( f.e.)
• give the svgs a color of white ( or whatever you like )

in case you had to use this with columns ( and said above the dividers are always look inwards the container ) and want it like your example above outside the column give to the column a custom class like: divider-outside

#top .flex_column.divider-outside .avia-divider-svg.avia-divider-svg-top {
  transform: none;
  transform: rotate(180deg);
  transform-origin: top center;
}
#top .flex_column.divider-outside .avia-divider-svg.avia-divider-svg-bottom {
  transform: rotate(0deg);
  top: 100%;
  bottom: unset;
}