Customizing - Page Background

[saritastevens 0]

As a start point - I would like to have a gradient page background on my fixed width site. I am not sure WHICH css file this should go in. I've looked on firebug - but the changes I've made haven't actually done anything, so I must have changed the wrong file. I have installed pro and base - all vanilla right now. Site at www.nwcoc1.themarketingcrew.com

[historicshed 0]

Paste it in the custom code box or use the WP editor to put it in the base.css file (my preference is to use the regular WP editor under Appearance):

body #page { background: #ffffcc; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CC9966', endColorstr='#FFFFCC'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#CC9966), to(#FFFFCC)); /* for webkit browsers */ background: -moz-linear-gradient(top, #CC9966, #FFFFCC); /* for firefox 3.6+ */ }

Hope that's helpful

[saritastevens 0]

Jo-Anne, Thanks - that worked :-) However, I was kinda hoping to put a png in to the code. Could I substitute the url of the png for the colors in the code? Sarita

[ricardo 0]

A more conventional approach (although it might not suit your needs) is to create an image file with the gradient you want, make it the page background and simply lock it in place, preventing it from scrolling. Ricardo

[saritastevens 0]

ok Ricardo, that's what I initially thought I would need to do - but trying to find out where in the code do I refer to the url? Can you help?

[saritastevens 0]

I'm sure this is a quick answer for someone! I'd sure appreciate the help! I'm just trying to find out WHERE to link a png to in the code, if I want to give my page an image background in fixed width mode?

[ricardo 0]

You add the following to your PlatformPro Settings > Custom Code > Custom CSS Rules:

body { background: #fff url('/path/to/background.jpg') no-repeat fixed !important; }

The #fff bit adds a default background color, what you'll see while the background image loads. In some sites I've found that I prefer a middle value instead of the lightest or darkest color of the gradient. The !important bit just says "this takes precedence over other css rules for this element". Try without it first, if it works then leave it out. Beware that you will need to change the background of the other elements that stack over the body and have background colors already defined. This should be enough:

#site, #page, #page-canvas, #header, #page-main { background: transparent !important; }
	

Ricardo

[saritastevens 0]

Hey Ricardo - I'll check it out tomorrow - but wanted to thank you so much for your time helping me out today :-) I'll let you know how it goes!

[ricardo 0]

You're welcome Let us know if that works!