Jump to content
Sign in to follow this  
watsonneil

Amend background image on a specific page

Recommended Posts

watsonneil    0
watsonneil

I'm using Platform Pro, with Full width design and I'd be interested in creating a different look to the blog area of my site by setting a different background image from the rest of the site. However, if I amend the child CSS to: #page {background: url(image_url) no-repeat 0 0; it sets the background image as required, but this is only visible in the top 5 or so pixels of the page (border)it is then subsequently covered by the default background which is called out in the CSS below. So, I assume the canvas is covering the background. .canvas #page, .full_width #page, body.fixed_width { background-image: url(http://www.taggedmarketing.com/wp-content/uploads/2011/01/TM-bck9.png); } Any ideas how to amend a specific canvas type? I've tried playing with the above CSS, but to no avail. I love the power of your theme and I guess I can't help digging deeper! Thanks

Share this post


Link to post
Share on other sites
Kate    3
Kate

Hey Neil - Do you have a link to your site? I'm not sure how you have your blog area setup... is it based off of a static page that you assigned in the "Reading" settings? If so, then you should have a class in the body tag of "blog". You can use that to style the page. If you need help with that, let us know.

Share this post


Link to post
Share on other sites
cmunns    16
cmunns

If you want to do anything specific to this page with CSS you just need to precede any rule with this `.page-id-1059 ...{}` It's a unique class for that page.

Share this post


Link to post
Share on other sites
Robert Campbell    0
Robert Campbell

I've had this problem...I can't remember specifically how I solved it, but try this: Add body before the rest of the css to select the offending background like so: First: I suggest you use the body tag to apply the background which will remove the sliver at the top of the screen. Then use the body class to overrule the generic body background image like so:

body.page-id-1059  {url(http://www.taggedmarketing.com/wp-content/uploads/2011/01/TM-bck9.png);}

The body will add more specificity which will cause this rule to overule the CSS from the anywhere else and change background image. At least, that's how I think you'd fix the problem, I'm in the middle of something else right now, so I can't dig any deeper.

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  

×