How to implement Backstretch (as pg bg) with child theme

[Riavon]

These are the instructions I've saved for myself. Thought I'd share them with the community in case anyone else wants to use Backstretch for a full width responsive page background image. I'm still learning, but this is what I've figured out, so far.
---
To use the backstretch script with Genesis sites, it's simple! Just add these lines of code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js "></script>
<script>
  // To attach Backstretch as the body's background
  $.backstretch("path-to-the-image/image.jpg");
</script>

...in the Genesis Theme Settings area, in the very last entry field: "Enter scripts or code you would like output to wp_footer():" this code is for a single bg image sitewide. The script is called from where it is stored so there is no need to install the scripts locally (unless you want to.) If you do, those scripts can be found HERE.

Or download the master files (all of it) from Scott Robbin
---
To add Backstretch to a block level element:

<script>
 $(".foo").backstretch("path/to/image.jpg");
</script>

After you create the page, get the page's id number by hovering mouse over the page name in the list view, looking at address bar at the bottom of your screen to show the page (post) id. Or view source of the page and look for it in the tag.

For example:

$(".page-id-635").backstretch("path-to-image.jpg");

gives me a different background image on page id#635 than on the home/other pages.

---

Twitter: @riavonentprises

[Riavon]

All together it looks something like this (replace page id#'s and paths to images with your own). I upload the images to the media library and use the full path to it, i.e. "http://mywebsite.com/wp-content/uploads/2013/01/image-name-1.jpg " .

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js "></script>
<script>
  // To attach Backstretch as the body's background
  $.backstretch("path-to-the/image1.jpg");
</script>
<script>
 $(".page-id-635").backstretch("path-to-the/image2.jpg");
 $(".page-id-725").backstretch("path-to-the/image3.jpg");
</script>

---

Twitter: @riavonentprises

[Ipstenu]

Since jquery is included in WP and reincluding it multiple times can cause things to go blaaaaargh, I would suggest this:

Put the backstretch file in your theme's js folder and then this in your functions:


/** Stretch your back **/

function backstretch_js() {
wp_enqueue_script(
'backstretch',
get_stylesheet_directory_uri() . '/js/backstretch.js',
array('jquery'), '2.3', yes
);
}
add_action('wp_enqueue_scripts', 'backstretch_js');


(You can use //cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js instead of the get stylesheet if you just wanna use google).

Then you just need the block element. I put it in /wp-admin/admin.php?page=genesis on the footer section. Works nicely 🙂

[Riavon]

Thanks, Ipstenu, this is a much more elegant - and properly done - solution!

---

Twitter: @riavonentprises

[yellowdog]

I am trying to implement this backstretch

I have uploaded the .js file and added the code to functions.php but i am stuck at the next part?

 

How do i use the Block element?

Damn..this genesis has a learning curve for me!!

 

[scoe]

Wonder if anyone has done with this the new Pro version?

[Author]

Posts