2

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 :)

katrinejc
  • 21
  • 3

1 Answers1

0

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.

Rizky Fakkel
  • 8,703
  • 1
  • 14
  • 20
  • Im not sure if i understand quite what u mean, but I can see that the class wsite-page-x works. So how do I exactly but this class on this code? #main-wrap { padding-top:50px; position:relative; width:100%; } */ #main-wrap .container { padding:40px; width:90%; min-height:400px; background:url(main_background.png); background-size:142% 142%; position: absolute; top:-200px; left:2.5%; right: 2.5%; border-radius:0px; box-shadow:0 1px 5px rgba(0,0,0,0.2); } Right now this code is for all pages, so how do i put the wsite-page class on to it? Sorry for probably asking stupid q. – katrinejc Jul 09 '15 at 13:09
  • If you want this to work on one specific page, add the `wsite-page-...` class of that page in front of every row you use for that one page. So `#main-wrap` would become `.wsite-page-... #main-wrap` and `#main-wrap .container` becomes `.wsite-page-... #main-wrap .container`. Hope that clears it up for you. – Rizky Fakkel Jul 09 '15 at 13:21
  • Thank you, I got it to work now :)Turns out i forgot to comment out the default main content style, after I inserted the page class. – katrinejc Jul 09 '15 at 17:21