Jump to content


Photo
- - - - -

Amend background image on a specific page


This topic has been archived. This means that you cannot reply to this topic.
4 replies to this topic

#1 watsonneil

watsonneil

    Newbie

  • Members
  • Pip
  • 8 posts

Posted 20 January 2011 - 07:51 AM

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(

Please Login or Register to see this Hidden Content

); } 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

#2 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 20 January 2011 - 02:38 PM

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.

#3 watsonneil

watsonneil

    Newbie

  • Members
  • Pip
  • 8 posts

Posted 20 January 2011 - 03:29 PM

It's a page

Please Login or Register to see this Hidden Content

It's not a static page because I wanted the carousel.

#4 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 20 January 2011 - 05:25 PM

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.

#5 Robert Campbell

Robert Campbell

    Newbie

  • Members
  • 9 posts

Posted 20 January 2011 - 05:39 PM

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:

Please Login or Register to see this Hidden Content


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.