Background images in pages
I would like to use a different background image for each page. I haven't been able to find instructions for that. Any ideas?
|
You can access any property on any page with the body ID. Each <BODY> tag has an ID and classes. Look into the source code of various pages to see
body#body-page-XX div.post { ... } or body#body-page-XX td#middle { ... } etc... XX = ID of post or page |
Ok, that works. Thanks.
What about my "home" page? It doesn't seem to have a page ID. I tried 0 and that didn't work. Other pages work fine. |
The homepage has
body#body-frontpage Only pages that don't have an ID have an ID of "0", such as date based archive pages (category pages have an ID). They don't get an body ID but they have classes such as "December" and "2008" Categories have body#body-cat-1 |
Thanks!
Next background image question... I would like to create a page that has nothing but an image. I would like the image to display full size (in the center column) border to border. It would seem I have two options that aren't working well- 1. Create a page in WP and insert the image. This works, but it doesn't fill the column because of the padding setting I need on other pages. Is there a way to not have any padding on a single page? 2. Use a background image as discussed above. This fills the column, but if I don't post some kind of content in the page, I only see the top few pixels. How can I get the bachground, and only the background image seen in full? |
1. With the same method described above, just using padding: 0;
2. Set a fixed height for the DIV where you want to apply this |
Option 2 is the way to go. Where/how to I set that?
|
Add a CSS Insert
selector { height: XXXpx; } selector = whatever DIV you want to apply this on |
So far I have added these two CSS inserts:
Code:
div#post-13 { |
The second rule is applying it to the body. The image is probably there but covered by something, i.e. the layout container. If you wanted to add the image to somewhere "inside the layout, on the homepage" you'd have to add that other DIV of the "somewhere" area, i.e. div.post
body#body-frontpage div.post { padding-left: 10px; /* making room (50 pixels) for the image */ background: url(/wordpress/wp-content/uploads/2009/03/back2.jpg) scroll top left; } |
Hmm.. I pasted that in and no change to the home page.. very strange...
|
All times are GMT -6. The time now is 09:24 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.