Jump to content
Sign in to follow this  
saritastevens

Customizing - Page Background

Recommended Posts

saritastevens

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

Share this post


Link to post
Share on other sites
historicshed

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

Share this post


Link to post
Share on other sites
saritastevens

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

Share this post


Link to post
Share on other sites
ricardo

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

Share this post


Link to post
Share on other sites
saritastevens

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?

Share this post


Link to post
Share on other sites
saritastevens

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?

Share this post


Link to post
Share on other sites
ricardo

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

Share this post


Link to post
Share on other sites
saritastevens

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!

Share this post


Link to post
Share on other sites
ricardo

You're welcome ;) Let us know if that works!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×