Replace Color background with an image - Squarespace Answers


https://answers.squarespace.com/questions/25236/replace-color-background-with-an-image

Hi, I tried a few things, but I can't figure this out. Is there a way to take an image and make it the background of a certain page? For example, on a Marquee template Index page, let's imagine there are 3 pages that fall within that index. Can I change the background color (that the page content lives on) to be an image? I know I can add a thumbnail image for the page, but this is different. I want it to replace the color. Very much appreciated. Thanks. image replace backgroundimage background marquee Asked Oct 29 '13 at 08:35 by j8ke 76●6 Anyone have any ideas? Thank you! (Oct 30 '13 at 09:55)j8ke 0 2 Answers:OLDESTNEWESTMOST VOTED The following CSS should work for you, but you will need to locate the Data ID for the item you are wanting to change.

.parallax-item[data-url-id='YOUR-DATA-URL-ID-HERE'] { .content-inner {background: none;} .content { background-image: url('YOUR-IMAGE.jpg') !important; background-repeat: no-repeat; background-position: center !important; background-size: cover; } } Answered Nov 04 '13 at 15:09 by bobbylauritson 148●1●2●5 link 0 Not sure about the answer above, but I got this code to work successfully for me. Make sure you add in the collection page to the top line and also add in the Image Link. To upload an image: (1) go to Style View (2) click CSS (3) When CSS window opens, in bottom right, click Custom files (4) upload file there and add link to 'YOUR-IMAGE-LINK-HERE' from code below

After you add in code, make sure you make content page transparent. Use the 'background-color' in the code below if you want to add color behind an image with an alpha channel.

.collection-'YOUR-COLLECTION-PAGE-ID-HERE' #content-wrapper .content { background-image: url('YOUR-IMAGE-LINK-HERE) !important; background-repeat: no-repeat; background-attachment: fixed !important; background-position: center center !important; background-color: #000000; background-size:cover; }