Created
March 27, 2017 23:21
-
-
Save mjsdiaz/fa244b78fc66876ac728bec3b1d756dc to your computer and use it in GitHub Desktop.
Backstretch Image to CSS Background Image in Agent Focused Theme - https://amethystwebsitedesign.com/backstretch-image-to-css-background-image-in-agent-focused-theme/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php // Do not add this line when you copy and paste code. | |
// Enqueue scripts for background image. | |
add_action( 'wp_enqueue_scripts', 'agentfocused_front_page_enqueue_scripts' ); | |
function agentfocused_front_page_enqueue_scripts() { | |
wp_enqueue_style( 'agentfocused-front-page-styles', get_stylesheet_directory_uri() . '/style-front.css', array(), CHILD_THEME_VERSION ); | |
/* | |
$image = get_option( 'agentfocused-front-image', sprintf( '%s/images/front-page-image.jpg', get_stylesheet_directory_uri() ) ); | |
// Load scripts only if custom background is being used. | |
if ( ! empty( $image ) && is_active_sidebar( 'front-page-1' ) ) { | |
// Enqueue Backstretch scripts. | |
wp_enqueue_script( 'agentfocused-backstretch', get_stylesheet_directory_uri() . '/js/backstretch.js', array( 'jquery' ), '1.0.0' ); | |
wp_enqueue_script( 'agentfocused-backstretch-set', get_stylesheet_directory_uri() . '/js/backstretch-set.js' , array( 'jquery', 'agentfocused-backstretch' ), '1.0.0' ); | |
wp_localize_script( 'agentfocused-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', $image ) ) ); | |
} | |
*/ | |
// Enqueue Modernizr for object-fit. | |
wp_enqueue_script( 'agentfocused-modernizr-object-fit', get_stylesheet_directory_uri() . '/js/modernizr-custom.js', array( 'jquery' ), '1.0.0' ); | |
} | |
// Add background image style to WP head. | |
add_action( 'wp_head', 'agentfocused_background_styles', 99 ); | |
function agentfocused_background_styles() { | |
$image = get_option( 'agentfocused-front-image', sprintf( '%s/images/front-page-image.jpg', get_stylesheet_directory_uri() ) ); | |
// Add style only if background image is being used. | |
if ( ! empty( $image ) && is_active_sidebar( 'front-page-1' ) ) { | |
echo '<style type="text/css" media="screen"> | |
body.front-page { | |
background-image: url(' . esc_html( $image ) . '); | |
} | |
</style>'; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The Steps to Take | |
1. First, we’ll comment out the sections that add the backstretch script. | |
2. Next we’ll add a new function to add the body background-image style, both in front-page.php. | |
3. And then we’ll add the positioning styles to style-front.css. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body.front-page { | |
background-attachment: fixed; | |
background-position: center center; | |
background-repeat: no-repeat; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
background-size: cover; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment