Custom Background - Design Control

[david_hartman 0]

Are there instructions or options available for using different custom backgrounds on different pages with the new 'design control' features in the 1.2.2 upgrade? Looked through the documentation and didn't see anything. Thanks, David

[cmunns 16]

There isn't but as before this is possible using CSS. We'd be happy to assist if you needed help with this.

[david_hartman 0]

Thanks. I could use the assistance if this is possible.. I have each page custom coded, but am still refining the elements so I thought this might be an easier method. If not, I could continue as it is and use this simply for the 'blog' page.. right now I'm using it on the front page and as you can see its already problematic with the 'blog' page.. http://wpdev.sontagfilm.org/ Thoughts..? If this is possible, how would I start adding multiple custom backgrounds using the 'design control' features? Thanks so much, David

[bryan-hadaway 3]

Every page has it's own id and every page type has it's own class. Like for example: `.home{background:url(whatever.jpg)}` Would set just the background for the homepage. or `.blog{background:url(whatever.jpg)}` For the blog page. See here to learn more about how you can take advanced control of your design: http://www.pagelines.com/docs/changing-colors-fonts Thanks, Bryan

[david_hartman 0]

Hi Bryan, That code seems to be putting a background image behind all of the primary site elements; the image just peeks through at the bottom in the footer.. Thanks, this does seem like a sensible way to do this.. David

[cmunns 16]

Where did you want the background applied if not to the whole site?

[david_hartman 0]

Adam, of course I do want it behind the site elements- here's what it does so you can see what i'm talking about: http://wpdev.sontagfilm.org/ Not only is it placing it in the footer (at a random position) but it is adding white around the image as well.. and part of it poking out from the top of the header.. (strange cause its not even that large) if you look at the other pages, you can see roughly what it should look like.. thanks, david

[Andrew 207]

Hey David, Have you familiarized yourself with basic CSS and Firebug? There are tutorials in the PL docs for you on it. Ap

[david_hartman 0]

Hi Andrew, Yes, I'm working through them. Any suggestions for this issue..? I thought this would be a simple one. Thank you, David

[bryan-hadaway 3]

Yes. `body #site, body #page{background:transparent}` Thanks, Bryan

[david_hartman 0]

Well, getting closer. By adding this- the background image is tiled? I just need it centered horizontally and lined up directly under the Navigation Bar.. I tried adding the CSS to that line to get this (margins, padding, auto, etc..) but that was changing the header along with it..? Would this line be the correct place to add those commands? Thanks so much Bryan, Best-David

[Kate 3]

Hi David - Right after where you place the URL, you'll have to add a little more CSS. Building on Bryan's example:

.home{background:url(whatever.jpg) no-repeat top center;}

[david_hartman 0]

Thank You Kate, Getting closer, added margins to get it in place, but still a couple issues.. 1- Padding at top: I can see in firebug its being padded 28px from the top via "mcolumn-pad", but I can't figure out the css to correct that 2- The white background color: I have the site background color set to: #1f0f00- I tried a hundred variations of adding this in the code and resetting the theme settings, but mostly it just made the background image disappear Here is what I have now..

.home{background:url(http://wpdev.sontagfilm.org/wp-content/uploads/2011/01/Home-Background.jpg) no-repeat center; margin: 0px 0px 0px 0px;}
	
	body #site, body #page{background:transparent}

Thanks so much.. David http://wpdev.sontagfilm.org/

[cmunns 16]

If you are going to use this: ` body #site, body #page{background:transparent} ` you should change it to ` body #site, body #page{background-color:transparent} `

[david_hartman 0]

Ok, Thanks. I made that change and tried getting the correct background color back, but it still overwrites the image by adding it here.. These two issues still persist: 1- Padding at top: I can see in firebug its being padded 28px from the top via "mcolumn-pad", but I can't figure out the css to correct that 2- The white background color: I have the site background color set to: #1f0f00- have tried variations of adding this in the code and resetting the theme settings, but it just made the background image disappear behind the color Here is what I have now..

.home{background:url(http://wpdev.sontagfilm.org/wp-content/uploads/2011/01/Home-Background.jpg) no-repeat center; margin: 0px 0px 0px 0px;}
	
	body #site, body #page{background-color:transparent}

Thanks so much.. David http://wpdev.sontagfilm.org/

[Andrew 207]

@David, probably should start a new thread for diff. questions.

[david_hartman 0]

would that really help? thought we were close to solving this? thanks, david

[david_hartman 0]

Ok, Per Andrew's suggestion, I'm going to close out this thread and start a new one for these background image issues. In case someone else out there is looking for any of this, I was able to fix the alignment problems with the following code. (background color issues still persist)

.home{background:url(http://wpdev.sontagfilm.org/wp-content/uploads/2011/02/Home-Background_draft.jpg) no-repeat; background-position:226px 170px;}

body #site, body #page{background-color: transparent}

Thanks, David