Background images in pages

ErikU · #1 Apr 14, 2009, 06:52 PM

I would like to use a different background image for each page. I haven't been able to find instructions for that. Any ideas?

Flynn · #2 Apr 14, 2009, 07:15 PM

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

ErikU · #3 Apr 14, 2009, 08:52 PM

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.

Flynn · #4 Apr 14, 2009, 08:56 PM

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

ErikU · #5 Apr 16, 2009, 04:31 PM

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?

Flynn · #6 Apr 16, 2009, 06:41 PM

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

ErikU · #7 Apr 16, 2009, 06:54 PM

Option 2 is the way to go. Where/how to I set that?

Flynn · #8 Apr 16, 2009, 06:59 PM

Add a CSS Insert

selector {
height: XXXpx;
}

selector = whatever DIV you want to apply this on

ErikU · #9 Apr 16, 2009, 07:41 PM

So far I have added these two CSS inserts:

Code:

div#post-13 {
padding-left: 10px; /* making room (50 pixels) for the image */
background: url(/wordpress/wp-content/uploads/2009/03/back1.jpg) scroll top left;
}
body#body-frontpage {
padding-left: 10px; /* making room (50 pixels) for the image */
background: url(/wordpress/wp-content/uploads/2009/03/back2.jpg) scroll top left;
}

The first one works fine. The second, for the home page, doesn't seem to do anything. Thoughts?

Flynn · #10 Apr 16, 2009, 08:08 PM

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

ErikU · #11 Apr 16, 2009, 08:36 PM

Hmm.. I pasted that in and no change to the home page.. very strange...