WordPress code to overlay an image on the webpage I'm working on. This should only be used on a development site. This can be used as an mu-plugin

wp-overlay-dev.php

<?php
/*
 * Plugin Name: Overlay Dev
 * Description: Overlay an image on the website to assist with development. Please add overlay-dev.png to the same directory as this file. This works as an mu-plugin.
 * Version: 1.0.0
 * Author: Sal Ferrarello
 * Author URI: http://salferrarello.com/
 *
 * This file can be copied from the gist with
 * curl -O https://gist.githubusercontent.com/salcode/f286c301663edad4e4a3/raw/wp-overlay-dev.php
 */
add_action( 'genesis_after', 'fe_overlay_dev' );
add_action( 'wp_head', 'fe_overlay_css' );
add_action( 'wp_footer', 'fe_overlay_js' );

function fe_overlay_dev_get_image_name() {
	return 'overlay-dev.png';
}

function fe_overlay_dev() {
	$image_name = fe_overlay_dev_get_image_name();
?>
<div id="fe-overlay-container">
	<img src="<?php echo plugins_url( $image_name, __FILE__ ); ?>" alt="Overlay Dev">
</div><!-- #fe-overlay-container -->
<button id="fe-overlay-control" class="btn btn-primary">Toggle Overlay</button>
<?php
}

function fe_overlay_css() {
?>
<style>
	#fe-overlay-container.fe-overlay-hideme {
		display: none;
	}
	#fe-overlay-container {
		position: absolute;
		top: 0;
		z-index: 9999;
		width: 100%;
	}
	.admin-bar #fe-overlay-container {
		top: 32px;
	}
	#fe-overlay-container img {
		display: block;
		margin: 0 auto;
	}

	#fe-overlay-control {
		position: fixed;
		top: 80px;
		left: 20px;
		z-index: 99999;
	}
</style>
<?php
}

function fe_overlay_js() {
?>
<script>
jQuery( document ).ready( function($) {
	$( '#fe-overlay-control' ).on( 'click', function() {
		$('#fe-overlay-container').toggleClass( 'fe-overlay-hideme' );
	});
});
</script>
<?php
}