fsb_apply_background_to_target_only

The fsb_apply_background_to_target_only filter allows developers to manipulate the location on the page where the background image is displayed.

By default, the image is displayed in the background area of the page. In most cases this is the desired location. However, there could be occasions where users want to make a smaller, more specific area of the page have the background image. For example, the header, footer, a sidebar, or some other special content area.

This filter is passed two arguments:

• $target (string): Default is an empty string (''), which indicates that the image should be displayed in the background as it always has.
• $ids (array): The id number(s) of the images that are being displayed as found in the table on Appearance > Fullscreen BG Image.

The filter expects your function to return a string of ID or class elements where the background image should be displayed.

An example use of this filter to apply different images to different areas:

add_filter( 'fsb_apply_background_to_target_only', 'background_custom_target', 10, 2 );
function background_custom_target( $target, $ids ){
	foreach ( $ids as $id ) {
		switch ( $id ) {
			// Set image ID #4 to be displayed in the element with the ID 'content'
			case '4':
				$target = '#content';
				break;

			// Set image ID #6 to be displayed in the element with the class 'site-header'
			case '6':
				$target = '.site-header';
				break;

			// All other images should be displayed in the background as usual.
			default:
				$target = '';
				break;
		}
	}
	return $target;
}

An example use of this filter to apply all background images to the same area on a page with the id #content. You could use this if you want to use your background images in the content area of your pages instead of the background.

add_filter( 'fsb_apply_background_to_target_only', 'background_custom_target_for_all', 10, 2 );
function background_custom_target_for_all( $target, $ids ){
	return '#content';
}