How do I change the background of a page or pages in an index?

I'm asking this question so I can answer it!

You only need one style element per page and instead of using protocol URLs, use protocol-relative URLs (that is: drop the http). Also – code always looks better and is easier to follow when it’s nested nicely:

<style>
#about {
 background-image: url(//static1.squarespace.com/static/55525aaae4b03147c4b943df/t/5558bacce4b01c8e63a70f6c/1431878348238/pinkbg.jpg);
}
#team {
 background-image: url(//static1.squarespace.com/static/55525aaae4b03147c4b943df/t/5558c3fce4b086d6f584a4eb/1431880700909/bluebg.jpg);
}
#product {
 background-image: url(//static1.squarespace.com/static/55525aaae4b03147c4b943df/t/5558c721e4b00de931f2f91a/1431881505176/greenbg.jpg);
}
</style>

neeklamy - good to know. thx for evolving me.

p

Great guide.

Do you know how this can be achieved in the FIVE template.

Basically I want the entire canvas/content section (the white area) to be an image.

Is this possible?

Thanks in advance,

Chris

Great guide.

Do you know how this can be achieved in the FIVE template.

Basically I want the entire canvas/content section (the white area) to be an image.

Is this possible?

Thanks in advance,

Chris

hey chris - thx, glad it helped.

i'm not intimately familiar with FIVE but you can try this method if it allows for an index. just use your image as the background. if it turns out wonky, then perhaps try another method with help from other answers on this forum or chat with Squarespace suppot.

however, i can tell you that all things are potentially possible... turn inwards for supreme guidance.

best,

p

I am trying to place a transparent PNG image in the background of a regular Page, not an Index page. Should I still place the code in the top level Index Config box?

Also, I want to have the image forced to the bottom-right of my page(s). Attached is a PSD mockup. Is the code below correct (besides replacing the proper page and image names)? I cannot seem to get it to work.

Great tutorials, btw!

Thanks for all your help!

George

    <style>
#solutions {
 background-image: url(http://image.jpg);
 background-repeat:no-repeat;
 background-position:right bottom;
}
   </style>

@Peter Rox of the Future What if I don't have an image, I just want to change the color of the background. How do I code that?

Instead of background-image: use background-color: followed by a hex number or sometimes a simple color word, like "red" will work. For example,

background-color: #e4e4e4;

or

background-color: red;

If you're just using color you don't need the background-repeat: or background-position:

Or, if you want to use a specific background with images, or patterns, then apply the same method and just add spacers.

peter rox

Five has a built in background image option: https://support.squarespace.com/hc/en-us/articles/205812788-Adding-a-background-image

Changing a background for an area in your website seems like it should be a basic operation, but in Squarespace reality this maneuver takes a little bit of wrangling to make happen. After considerable effort, I was fortunate enough to figure out the process and would like to share it with other “non-coding” bozos like myself so you don’t have to pull out your wig like I did.

I’m using the “Hayden” template, but this process does work with other templates (although you might have to make adjustments to the design of your template).

Crank up the Dirt Nasty and follow this “easy-to-understand” technique:

First off, view my Squarespace website at xormedium.com as an model for this process. Notice how there are blocks of text and images with different backgrounds. This process is designed to show you how to do that and is intended for novice coders/Squarespace users.

Go to your Squarespace main panel. In the “Pages” section, click on the “+” next to the “Main Navigation.” This will open up the “Create New Page” dialogue box. Add an “Index” and name it. (*Note: not all templates offer an index option. If your template does not offer an index, then this technique will not work. You can either change your template to one that has an index or search the forum for another method.)

Under the index you just created, click on “+ Add Page”. This will open up the index specific “Create New Page” dialogue box. Add a “Page” to the index. Name the page and take note of the name. We’ll come back to this.

Click on the gear icon next to the index. Very important – make sure you click on the gear icon of the index, NOT the gear icon of the page under the index. This will open up the “Configure Index” dialogue box.

At the top right of the “Configure Index” dialogue box, click on “Advanced” – this will open up the “Page Header Code Injection” area.

Copy and paste this exact code into the “Page Header Code Injection” window:

<style>
#pagename {
 background-image: url(http://image.jpg);
}
   </style>

Now make one change to the code you just pasted in the “Page Header Code Injection” area. Select “pagename” and replace it with the actual name of the page you created earlier. Remember I said to take note of the name for the page? Now is the time where you enter that name into the code. (You can always find this name under the URL Slug in the Configure Page of the page you are changing.) So, if the name of the page you created is “About”, then this is what the code will look like:

<style>
#about {
 background-image: url(http://image.jpg);
}
   </style>

*Please note: the page name in the code MUST be lowercase. These things are really specific. It won’t work if you put in caps.

Click “Save” which closes the “Configure Index” dialogue box and returns you to the “Pages” section.

Go to the “Custom CSS” section. You get there from the “Pages” section by clicking “Home”, then “Design” then “Custom CSS.”

At the bottom of the “Custom CSS” section, click on “Manage Custom Files” and then click on “Add images or fonts.” This will open up a window dialogue box to your computer. Select the image file you have previously prepared – let’s say the file name is “pinkbg.” Click “Open.” This will upload the file and close the window dialogue box.

The file you selected will appear in the “Custom CSS” section directly below the “Add images or fonts” button. You may have to scroll down to see it. Once you find file, click on it. The location information of that file will then appear in the window that was previously empty. It will look something like this:

http://static1.squarespace.com/static/55525aaae4b03147c4b943df/t/5558bacce4b01c8e63a70f6c/1431878348238/pinkbg.jpg

Select the entire file location and copy it. *Note – at the bottom of the window you may see a warning that says “Error Syntax on line 1.” I get that every time but it doesn’t seem to affect anything, so ignore it.

After you have selected and copied the file location from the window, hit delete on your keyboard so the location information is cleared from the window. Don’t worry, this only clears the information from view. The image file is still retained.

Click “Save” and then “Design.” This returns you back to the “Design” section. Now click on “Home” and then “Pages.”

Click on the gear icon next to the index. This will open up the “Configure Index” dialogue box again. Click on “Advanced” in the top right. In the “Page Header Code Injection” you will see the code you previously entered and modified which looks like this:

<style>
#about {
 background-image: url(http://image.jpg);
}
   </style>

In the code, select “http://image.jpg” and replace with the file location information you previously copied. The modified code will now look like this:

<style>
#about {
 background-image: url(http://static1.squarespace.com/static/55525aaae4b03147c4b943df/t/5558bacce4b01c8e63a70f6c/1431878348238/pinkbg.jpg);
}
   </style>

Click “Save” on “Configure Index” dialogue box, which returns you to the “Pages” section. That’s it! The background will now appear live in the indexed page once you add text or images or something. IMPORTANT: you MUST add text or images or something (like a spacer) to the pages for the background to appear.

If for some reason the background doesn’t appear, check the code carefully. If a parenthesis or bracket is missing or page name is misspelled, those things will cause the background to not appear.

To get multiple blocks of text & images with different backgrounds, simply add more pages to the index and repeat the process. Just copy the code in the “Page Header Code Injection” of the index and paste it underneath the previous code. Then change the name of the page, upload more backgrounds and replace the image location in each code section. So, for multiple blocks in an index, your code might look something like this:

<style>
#about {
 background-image: url(http://static1.squarespace.com/static/55525aaae4b03147c4b943df/t/5558bacce4b01c8e63a70f6c/1431878348238/pinkbg.jpg);
}

#team {
 background-image: url(http://static1.squarespace.com/static/55525aaae4b03147c4b943df/t/5558c3fce4b086d6f584a4eb/1431880700909/bluebg.jpg);
}

#product {
 background-image: url(http://static1.squarespace.com/static/55525aaae4b03147c4b943df/t/5558c721e4b00de931f2f91a/1431881505176/greenbg.jpg);
}
   </style>

If you want to have multiple sections of your website that you can navigate to, then just add more indexes with pages underneath them and repeat the process for each index and page.

This may seem a little bit complicated, but follow each step exactly and after doing this two dozen times, it will become really easy. Good luck and keep tokin’.

-Peter Rox of The Future

+

watch DIGILIS on my Squarespace website at: digilis.com ...Prepare for The Unknown

++

also feel free to explore my other conceptual business ventures websites created on Squarespace:

xorsubliminals.com

xormedium.com

xorpsychonautics.com

+++

p.s. I’d like to give a big shot out to advisor Dave L. at Squarespace customer care for helping me to understand how all this stuff works. You da man.

Hello,

I cannot seem to get this to work on my index page (horizon template). I follow the instructions exactly, double check my code and url for the image and it still does nothing. I am using the below lines of code, can someone please help me figure this out. THANKS!

<style>
 #news {
   background-image: url(http://static1.squarespace.com/static/5728d493859fd02147b6e34e/t/57320852ab48dea767e60f61/1462896729989/Shhh+im+ripping+it.jpeg);
 }
     </style>

Is there a way to make a background image that's responsive. Kind of like the banner image, but then I can add content with more flexibility over the image?

THANK YOU!!!!! Good God...why is it so difficult to get a simple, layman's explanation of these things? I spun my wheels for 4 hours before I came across your simple instructions. I followed them step by step, and it worked perfectly. Truly - thanks for taking the time to pass along your hard-earned knowledge.

Is there a way to do this for the Pacific template? I've tried the method outlined above but didn't work for Pacific...