[SOLVED] different background images for individual posts/pages

goonygoogoo · #1 Sep 9, 2010, 02:21 PM

I've been looking through the forum for an hour plus

I want to be able to give indiviual pages different backgrounds within the layout container.

I looked here

http://forum.bytesforall.com/showthr...yout+container

but i can't seem to get the code right.

I have put

body#body-page-id-2 div.page{
background-image:url(http://www.travellingkitchen.com/wp-.../aboutbg.gif);
}
into my css inserts
all i want to do is change the background of the about page on my site within the layout container.
im pretty darn sure that the image call is correct i am just effing up the div or the page id i don't know but i'm sure it's simple.

http://www.travellingkitchen.com/

goonygoogoo · #2 Sep 9, 2010, 05:11 PM

one thing i am wondering is if having background defined within the main body settings overrides any css inserts.

also the coding i sited was just the most recent iteration in desperation.

juggledad · #3 Sep 10, 2010, 05:04 AM

see http://forum.bytesforall.com/showthr...ght=image+page

DragNfLy · #4 Sep 10, 2010, 07:14 AM

HI

I am struggling with a similar problem if not exactly the same.

Been at it for 2 days now and have tried many different possibilities.

I have found this code to be the closest match:

body.home td#middle {
background-image: url("/wp-content/themes/atahualpa353/images/middle.jpg");
background-position:center top;
}

.... but I have a page set as my home page and am not sure if changing the first line ( body.home td#middle { ) to reflect the page ID will work.

I also need a different image for each pages' (layout area) background.
I too cannot seem to get the code right.

Can anyone please help a newb here.

DragNfLy · #5 Sep 10, 2010, 07:16 AM

Just saw your post now juggledad > will give this one a try and get back to this thread.

Thanks

DragNfLy · #6 Sep 10, 2010, 07:56 AM

Still no luck here. I am not getting any background image with this code.

The site is here > decodance.co.za

Please have a look

goonygoogoo · #7 Sep 10, 2010, 12:57 PM

my current code reads

body.page-id-2 div#image {
background-image:url(/wp-content/themes/atahualpa/images/aboutbg.gif);
}

I am pretty sure the "body.page-id-2" is ok
and i know the url call is right. I think i am just messing up the div not sure what it needs to be assigned to

td#middle is real close it works for the post area of the page but not the outlying area under the widgets header etc.

does w3 have a good primer on figuring out div?

lmilesw · #8 Sep 10, 2010, 01:21 PM

How about just using

HTML Code:

body.page-id-2 {
background-image:url(/wp-content/themes/atahualpa/images/aboutbg.gif);
}

goonygoogoo · #9 Sep 10, 2010, 01:23 PM

Sweet Jesus hallelujah.

the code that worked for those who come after.

body.page-id-2 div#container {
background-image:url(/wp-content/themes/atahualpa/images/aboutbg.gif);
}

now i just have to figure out what backgrounds i want to use now that i know how to do it!

and thank you to the mods

goonygoogoo · #10 Sep 10, 2010, 01:57 PM

I just finished working through a problem but i thought i would explain the solution for those who come after.

I wanted to alter the background within the container for individual pages

the code that worked
inserted into ato css inserts

body.page-id-2 div#container {
background-image:url(/wp-content/themes/atahualpa/images/aboutbg.gif);
}

My understanding is that the code breaks down like this

"body.page-id-2" is the opening call it specifies what page you want to alter.
you can find out what that is by looking at the source code of the page in mozilla.

mine looked like this

<![endif]-->
</head>
<body class="page page-id-2 page-template page-template-default logged-in">
<div id="wrapper">
<div id="container">

you can see "page-id-2" that's what you want

"div#container" specifies what area of the page you are altering in my case the entire middle of the page.

you can leave it blank and that will alter the background behind the container or you can specify further like is td#middle which will alter only the middle part of the layout container i.e.

body.page-id-2 {

or

body.page-id-2 td#middle {

this finishes the "where" now onto the "what"

"background-image:url(/wp-content/themes/atahualpa/images/aboutbg.gif);" is what is encased in the {} it is the actual alteration to the page that you are performing in my case i am changing the background. note in my case aboutbg.gif is an image i created in photoshop that is the exact width of the fixed width container so i don't need to specify repeat or no repeat etc by default it repeats down the page.

this code could be anything you have already specified where exactly you want to make changes it need not be to the background it could also befont or font size or just about anything i would guess

hope that helps.