The Divi theme is a popular WordPress theme that allows users to easily create beautiful websites using its drag-and-drop builder. One of the key features of Divi is the ability to set a background image for different sections or modules on your website.
To set a background image in Divi, you can use the background-image CSS property. Here’s an example of how you can add a background image to a section in Divi:
function wpsnippets_divi_background_image() {
echo '<style>';
echo '.my-section {';
echo ' background-image: url(' . esc_url( get_stylesheet_directory_uri() . '/images/my-background-image.jpg' ) . ');';
echo ' background-size: cover;';
echo ' background-position: center center;';
echo '}';
echo '</style>';
}
add_action( 'wp_head', 'wpsnippets_divi_background_image' );
In this example, we’re using a custom PHP function wpsnippets_divi_background_image to output the CSS code that sets the background image. The function is hooked to the wp_head action, which ensures that the CSS code is added to the <head> section of your website.
To use this code snippet, you need to replace 'my-section' with the CSS class or ID of the section or module where you want to add the background image. You also need to update the URL of the background image to the actual URL of your image.
This code snippet can be useful when you want to customize the appearance of a specific section or module in Divi by adding a background image. It allows you to create visually appealing designs and enhance the overall look and feel of your website.
Examples
Example 1: Adding a background image to a Divi section
This use case demonstrates how to add a background image to a Divi section using the et_pb_section_options filter hook.
function wpsnippets_add_background_image( $args ) {
$args['background_image'] = 'https://example.com/path/to/image.jpg';
return $args;
}
add_filter( 'et_pb_section_options', 'wpsnippets_add_background_image' );
The code above adds a background image to a Divi section by hooking into the et_pb_section_options filter. The wpsnippets_add_background_image function sets the background_image property of the $args array to the URL of the desired image. The modified $args array is then returned.
Example 2: Adding a background image to a Divi row
This use case demonstrates how to add a background image to a Divi row using the et_pb_row_options filter hook.
function wpsnippets_add_background_image( $args ) {
$args['background_image'] = 'https://example.com/path/to/image.jpg';
return $args;
}
add_filter( 'et_pb_row_options', 'wpsnippets_add_background_image' );
Similar to the previous example, the code above adds a background image to a Divi row by hooking into the et_pb_row_options filter. The wpsnippets_add_background_image function sets the background_image property of the $args array to the URL of the desired image. The modified $args array is then returned.
Example 3: Adding a background image to a Divi module
This use case demonstrates how to add a background image to a Divi module using the et_pb_module_options filter hook.
function wpsnippets_add_background_image( $args ) {
$args['background_image'] = 'https://example.com/path/to/image.jpg';
return $args;
}
add_filter( 'et_pb_module_options', 'wpsnippets_add_background_image' );
Similarly, the code above adds a background image to a Divi module by hooking into the et_pb_module_options filter. The wpsnippets_add_background_image function sets the background_image property of the $args array to the URL of the desired image. The modified $args array is then returned.