Wordpress Themes - WP Forum at BFA - Background images in pages

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)

- - Background images in pages (http://forum.bytesforall.com/showthread.php?t=1266)

ErikU

Apr 14, 2009 05:52 PM

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?

Flynn

Apr 14, 2009 06: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

Apr 14, 2009 07: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

Apr 14, 2009 07: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

Apr 16, 2009 03: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

Apr 16, 2009 05: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

Apr 16, 2009 05:54 PM

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

Flynn

Apr 16, 2009 05:59 PM

Add a CSS Insert

selector {
height: XXXpx;
}

selector = whatever DIV you want to apply this on

ErikU

Apr 16, 2009 06: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

Apr 16, 2009 07: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

Apr 16, 2009 07:36 PM

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

All times are GMT -6. The time now is 05:44 PM.