I have a Weebly website, and the default Weebly css and html code only uses one main content background (the background that fits the drag and drop area) for all pages on the website. I know how to customize this, however I dont know how to create more/different main content backgrounds and use each for a specific page. I suspect I need a script, or maybe enter a specific code in the header of each page, but I dont know. Alternative options like inserting the background in the header code itself will not work, as this will not fit when resizing the browser window.
Help is much appreciated :)
Each page on Weebly has a wsite-page-... class on it. For example, take this website which is made in Weebly. The background is on the #wrapper div element, but the body tag on this page has a wsite-page-my-story class on it. This class is unique for this page. Therefore, I can apply CSS to the #wrapper id by identifying it through the body's class like so:
.wsite-page-my-story > #wrapper {background:red;}
This will make the background on that specific Weebly page bright red. This can of course be replaced with anything else.