WP Bakery Page Builder - Custom Background Parameters for vc_column_inner

functions.php

/*
    Add the following to your theme's functions.php file
    In this case, I wanted to add a background image outside of the normal controls
    so I could darken it by a % using linear gradients.

    I added 2 fields to vc_column_inner:
*/

// The background image
vc_add_param("vc_column_inner", array(
    "type" => "attach_image",
	"class" => "",
	"heading" => "Background Image to Fade",
	"param_name" => "bg_img_fade"
));

// A text field to receive a whole number (this will be converted to opacity)
vc_add_param("vc_column_inner", array(
    "type" => "textfield",
	"class" => "",
	"heading" => "% to fade it (enter as a whole number)",
	"param_name" => "bg_img_fade_num"
));

vc_column_inner.php

/* place this file in [your-theme]/vc_templates/ */

<?php
if ( ! defined( 'ABSPATH' ) ) {
	die( '-1' );
}

/**
 * Shortcode attributes
 * @var $atts
 * @var $el_class
 * @var $el_id
 * @var $width
 * @var $css
 * @var $offset
 * @var $content - shortcode content
 * Shortcode class
 * @var WPBakeryShortCode_Vc_Column_Inner $this
 */
$el_class = $width = $el_id = $css = $offset = '';
$output = '';
$atts = vc_map_get_attributes( $this->getShortcode(), $atts );
extract( $atts );

$width = wpb_translateColumnWidthToSpan( $width );
$width = vc_column_offset_class_merge( $offset, $width );

$css_classes = array(
	$this->getExtraClass( $el_class ),
	'wpb_column',
	'vc_column_container',
	$width,
);

if ( vc_shortcode_custom_css_has_property( $css, array(
	'border',
	'background',
) ) ) {
	$css_classes[] = 'vc_col-has-fill';
}

$wrapper_attributes = array();

$css_class = preg_replace( '/\s+/', ' ', apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, implode( ' ', array_filter( $css_classes ) ), $this->settings['base'], $atts ) );
$wrapper_attributes[] = 'class="' . esc_attr( trim( $css_class ) ) . '"';
if ( ! empty( $el_id ) ) {
	$wrapper_attributes[] = 'id="' . esc_attr( $el_id ) . '"';
}
$output .= '<div ' . implode( ' ', $wrapper_attributes ) . '>';
$innerColumnClass = 'vc_column-inner ' . esc_attr( trim( vc_shortcode_custom_css_class( $css ) ) );
/******** changes start here ********/
$output .= '<div class="' . trim( $innerColumnClass ) . '"';
// only add the image if it was entered
if( !empty($bg_img_fade) ) {
  // default fade of 30% if nothing was entered
	$fade_percent = isset($bg_img_fade_num) ? $bg_img_fade_num / 100 : 0.3;
	$output .= 'style="background:linear-gradient( rgba(0, 0, 0,'.$fade_percent.'), rgba(0, 0, 0,'.$fade_percent.')), url(\''.wp_get_attachment_url( $bg_img_fade ).'\'); background-size: auto 100%;"';
}
$output .= '>';
/******** changes stop here ********/
$output .= '<div class="wpb_wrapper">';
$output .= wpb_js_remove_wpautop( $content );
$output .= '</div>';
$output .= '</div>';
$output .= '</div>';

echo $output;