Marquee: Full Width Background on pages that have NO Thumbnail - Backstretch needed ? - Squarespace Answers

https://answers.squarespace.com/questions/19639/marquee-full-width-background-on-pages-that-have-no-thumbnail-backstretch-needed

Marquee: Full Width Background on pages that have NO Thumbnail - Backstretch needed ? - Squarespace Answers

Hello, all.

I don't know if its easier to use my site as an example, but I reference the template demo.

The short version: I am using the Marquee template, but I need to create a page with a full width background that has blocks on it. Any ideas how to put a full width background image on any page?

The more detailed version: I am using the Marquee template and it displays the page thumbnail (found in page settings) as a full width background image. I have added an image of the set up below.

Challenge #1 This looks cool, but it does not allow you to add page blocks. The title and description are all that is displayed (see set up image). Once the user scrolls down page page blocks will display, but on a white background. You can see an example here. Let the page load and scroll down. Once you scroll down, its a white background. I'd like to change that to a full width background image (here only). Any ideas how?

So just to be clear... In this scenario: 1. Page thumbnail is set 2. User visiting the page will see full width bg image (via page thumbnail) 3. User scrolls down and now sees all page blocks... hoping to add a full width BG here.

Challenge #2 If you do not add a thumbnail to your page, Marquee will display the page and any blocks on a white background. There is no example of this, but if you go here, we can pretend the MENU banner image is not there. I would like certain pages that contain no page thumbnail to include a full width background image on the page (not just the banner). Only for specific pages.

My solutions so far: I've tried to use the inspector and change CSS - that didn't work. I can change the background color, but no image.

content-wrapper #yui_3_10_1_1_1375391947087_402.content.has-main-image {

background-image: url('../s/coffee.jpg') !important; background-repeat: no-repeat; background-attachment: fixed !important; background-position: center center !important; background-color: #130; } Whats interesting about the above is I can see the background color change, but no image shows up. I have confirmed the URL for the BG image is correct.

I've tried to use Backstretch, but I can't seem to get that to work at all. 1. I uploaded a SINGLE JS file (jquery.backstretch.min.js) as a link/external file and made note of the sqaurespace URL (s/jquerybackstretchmin.js) 2. I already added the ajax library in a site wide header injection (v1.8.3), so I didn't add this again. 3. I reference the backstretch javascript in my PAGE injection (page settings / advanced / code injection)

I add the backstretch javascript code as a code block on the page... as a sitewide header injection... in the page injection.

.backstretch ("path/to/image.jpg"); (wrapped in script tags of course)

Nothingshows up. Can anyone help me. Anyone have any ideas.