I’ve been searching the forum and trying to figure this out for several hours, but I’m having trouble specifying a different background image for a certain page that would be different from the background image for the rest of the site.

I have found some help in the forum at this thread:
http://forum.bytesforall.com/showthr...ckground+image

which got me this:

body.page-id-24 {background-image: url(...);}

so, to make this applicable to my site I came up with this, (my page id is 49):

body.page-id-49 {background-image: url(http://www.lorensquires.com/wwlinsite.com/wp-content/uploads/background-taller-1300.jpg) no-repeat !important;}

(I’ve verified that the image is available on the web.)

I think my problem is where to put this.

I know (I think) to put it in the ‘Add HTML/CSS Inserts’ tab for the theme, but I’ve tried to put it in ‘HTML Inserts: Body Tag’, ‘HTML Inserts: Body Top’, and ‘CSS Inserts’, but none of these attempts have been fruitful.

My version of Wordpress is 3.1
My version of Atahualpa is 3.6.4

Any help would be greatly appreciated! I’m pulling the rest of my hair out over this.

Thanks,
Loren

You would put the code in ATO>Add HTML/CSS Inserts>CSS Inserts but your CSS is incorrect. Since you are using CSS shorthand by putting the no-repeat in the same line as the image you should just use background and not background-image. If you use background-image and want it to not repeat you would use a second line with background-repeat but in my opinion the shorthand is a bit simpler.

body.page-id-49 {background: url(http://www.lorensquires.com/wwlinsite.com/wp-content/uploads/background-taller-1300.jpg) no-repeat !important;}

Thanks Larry for the input.

I copied your code into my 'CSS Inserts', but now I'm getting the original background image on top of the desired background image. The desired image is taller than the image for the rest of the site, since this page is taller than the home page.

You can see the page in question at http://wwlinsite.com/our-process and see what I'm talking about.

Any further ideas?

I wish I knew css better. Can you recommend a good css tutorial online that would help me understand divs, classes, elements, and how to tell what contains what and how to reference them?

Thanks,

Loren

I am not clear on where you want the image to appear. Is it the background for the body, or the post? Do you only want it to show when you are viewing a particular page?

The place I recommend for learning CSS is w3schools.com/css

The issue is that you have two images - one for the page and one for the container. The container sits on top of the page. on most pages you just see the conainer, but on the one you see both images. So on the page with the page background get rid o the container image.

Hi All,

With some help from the moderators here I was able to solve this issue. This latest post from Juggledad did the trick for me.
http://forum.bytesforall.com/showthr...2805#post62805

Here’s how it ended up. Hopefully this will help others in the same or similar boat.

My code in the ‘CSS Inserts’ of the theme to set the background image for the entire site looks like this:

div#container {
background: url(http://wwlinsite.com/wp-content/uploads/stg.jpg) no-repeat !important;
width; 900px;
}

Then the code just below in order to specify a different image for just a certain page looks like this:

body.page-id-49 div#container {background: url(http://www.lorensquires.com/wwlinsite.com/wp-content/uploads/background-taller-1300.jpg) no-repeat !important;
width:900px;
}

At it works WONDERFULLY.

Big, BIG thanks to Larry, and Juggledad.

Overall, I really appreciate this forum. All the websites I create for people use Wordpress and Atahualpa. I love this theme for it’s flexibility. And there is a wealth of information and help on this forum. I usually find all the help I need by using the SEARCH function. And I highly recommend this as the first step to getting help from here.

Thanks again. Donation forthcoming.

Loren