ksarul 0 Report post Posted January 22, 2012 My site has 6 static (non-blog) pages, set up from within WordPress. On each of these pages I'd like a different image in the sidebar. Can anyone tell me how to go about this? The site in progress is here: http://www1.certaintycompliance.com.au And you can see sample of how the images appear in the sidebars here: http://www.certaintycompliance.com.au/whatwedo.html Help much appreciated! Share this post Link to post Share on other sites
Rob 547 Report post Posted January 23, 2012 Well, each sidebar has it's own unique element identifier, and so too will each widget. You can set up the background for the specific sidebar background by the page using CSS to the id "sb-primary". Then, in your CSS you identify the specific page ID and apply the background singularly to that page. Former PageLines Moderator, Food Expert and Raconteur Share this post Link to post Share on other sites
ksarul 0 Report post Posted January 23, 2012 Thankyou. Can I get a little more specific help on the CSS selector? For example, for a page with an ID of 2, what would be the selector of its sidebar? Is it something like: #sub-primary .page-id-2 { background: url('address of image') no-repeat top left; } Share this post Link to post Share on other sites
ksarul 0 Report post Posted January 23, 2012 Sorry, I mean #sb-primary .page-id-2 { background: url('address of image') no-repeat top left; } Share this post Link to post Share on other sites
ksarul 0 Report post Posted January 23, 2012 Ahh, after much trial and error - the same problem I had when I did this site as straight html/css. The image won't go to the bottom of a sidebar that has no content in it, so I have to set the height of the sidebar to an arbitrary number: .page-id-2 #sidebar1 { height: 650px; background: url('address of image') no-repeat right bottom; } It's a dodgy solution at best. Does [i]anyone[/i] know how to stick a background image to the bottom of a sidebar that has no content in it? Share this post Link to post Share on other sites
Jenny 33 Report post Posted January 23, 2012 http://www.w3schools.com/css/css_background.asp You could try a background-repeat or a background-position (depending on the image) ♥ Jenny :: Web designer at Simple Mama (follow me at @simplemamacom) Check out Share Me, a social sharing add-on for DMS that is super simple to set up. Share this post Link to post Share on other sites
ksarul 0 Report post Posted January 23, 2012 No good. Since there's already an image on the background of the content area (the fade at the top), it has to be the background of the sidebar. However an image won't go at the bottom of a sidebar empty of content, as far as I can find out. Share this post Link to post Share on other sites
catrina 103 Report post Posted January 24, 2012 Perhaps you can add content to that sidebar and then just hide it using CSS so that the image can go there (leaving sidebar there and the widgets inside it hiding)? Please read the docs before posting. Please do not private message me unless I ask you to. Designer | Catrina Dulay Founder | Catrina and Mouse Share this post Link to post Share on other sites
ksarul 0 Report post Posted January 24, 2012 Thanks for the help, but I don't seem to be being very clear. I want the image to go at the bottom of the siebar. Adding hidden content will only make the image appear at the bottom of that hidden content - not necessarily at the bottom of the sidebar (if the main content is longer). I suppose it's a possible solution if the amount of content in the main content area doesn't change; though the vertical depth of that area will change in different browsers. Share this post Link to post Share on other sites
kastelic 6 Report post Posted January 24, 2012 If it has no content in it then it wont stretch far enough down. The only way is to change the height. A better solution would be to use min-height rather than height so that it can extend further if the content demands it. Share this post Link to post Share on other sites