Separate background images for Pages
 

I've looked through the forums and I'm pretty sure that what I want to do can be done, I just have no idea how to do it.

What I want to do is put transparent background images on my fixed pages (including the homepage), and have a different background image for each page.

All attempts on my part to put CSS background-image commands into the code for the page have met with failure, but I am pretty much a newb at CSS in the context of an already programmed framework. (i.e. Atahualpa 3.4.9 and WordPress 3.0.1. ).

Thanks for any help possible.

You can use body.home or body.page-id-88 with the background image code as shown in ATO>Body, Text & Links and put it all in ATO>Add HTML/CSS Inserts>CSS Inserts.

For example
would use background1.gif on the home page.

OR

would use background2.gif on the page with an ID of 88

You can determine those selectors by viewing the page source and searching for "body class"

OK, I think I understand how that will work, (not that I knew that those variable names existed), but this doesn't seem to be working in Ata 3.4.9. I found the Add HTML CSS in its own section and put in the code you suggested (with my own image, obviously), but it doesn't change the appearance of my home page. Is it possible that the variable that you describe is limited to the 3.5+ series?

I'd also like information on how to turn the background picture transparent, so I get ghost images behind my words, but I suspect that if I could get the image to appear, I could figure that out.


The only plugin I have running is Akismet.

Thanks for the help so far.

P.S. As far as WordPress is concerned it thinks 3.4.9 is the current version (25 Aug, 2010)

Could you post the code you used in CSS Inserts. I just want to check the syntax.

OK, this went right below a bunch of entries for

And thanks for the quick reply.

Try using the full path to the image.

OK, the code now reads:
It didn't work.

I also tried it with "http:" in front of the "//". I know that this is the correct address because I am using the image elsewhere in the site and copied the path from that usage. In fact, you could probably cut-and-paste the url to check the image. (It's an image from the NOAA website.)

I note that there is a space between "body.home" and "{", but I thought that was standard.

In a very perverse way, I am pleased that this is a complex problem, because I like to solve simple ones by myself. :)

P.S. Looked at the page with Firebug and found at the bottom of the CSS tab

P.P.S. When I remove my coding, the entry in the CSS tab of Firebug disappears. So something is interfering with the recognition of "body.home"

Stupid me... I had that same issue and forgot I couldn't use the background shorthand for some reason. Try this. I used black for the background color as that made sense for your picture.

Actually, I want white for a background color, so I can fade the image using transparency, but that's a trivial change.

Unfortunately, plugging in the code you gave me (with either background color) did nothing to bring up the image on the page. :(

I did look with Firebug and found the following entry near the top

about halfway through the hierarchy is the code


I attempted the change of "body.home" to "body.page-id-16" in the code, but to no avail. I believe, if I am interpreting the first quote correctly, the body should inherit from either. (The reason that it's post-16 is that I made a post to turn into a fixed page for the front.)

Looking in the CSS tab in Firebug now shows me the following information for body.home (I restored the code to "body.home")
but the little grey bar and circle shows up when hovering near the lines. (Not sure what that means because I am new to Firebug, too.)

At least now the code is being recognized and there is a reference to the picture -- it just isn't being used. That is progress. Thanks for your continuing assistance.

-- F.

I should have asked early on for you post a URL to the site. I used the URL from your image path and say that you have the layout width to nearly 100%. If you set that to 900px or so you should see the image. Also you could set the center content and sidebars to have no background color or image and you will see the image through them. If you do that I would suggest adding background-attachment:fixed; to the CSS

OK -- the fixed width change didn't do anything, but turning off the background in the ATO>[Style and configure Layout] area revealed it -- so it must have been covering the image up. Unfortunately, the image is now behind the entire layout, not just the central column, and I have been unable to figure out how to fade it with transparency.

Here's a quick link to the site: http://horanda.com so you can see it in its current state.
For image transparency, I tried adding:
to the code for body.home but that faded the text and other content, not the background image.

I also tried:
but that doesn't seem to work, either, possibly because those aren't real variables/instructions.

I really only want the background image in the central column, not over the entire page. I thought I had made that clear in my original post, but possibly not. Eventually, I'm going to want separate (fixed) background images for the sidebars, but I thought I'd start small. Little did I realize...

I now think I understand what you are trying to do. See if changing the previous code to the following does what you want. All I did was add the selector for the center column. What this code does is say in the center column on the home page use this background.

Excellent! Now all I have to do is figure out how to make it transparent/faded so I can see the words :) I presume I could do the same with styling body.page-id-##


Thanks much for the help. It's been very informative.

I did a little more research now that I have some knowledge of what to call things, and Googling yielded an unequivocal statement that background images cannot be made transparent using CSS code, and that the only way to do it is by using an image program to fade it manually. Bah.

Yes... You would have to create a transparent gif or png which isn't too difficult. What kind of image editing software do you have?

I have TheGimp, and it could do it (and I could figure out how). I was hoping to be able to do it on the fly so I could adjust it and test it on-line and use any uploaded photographs rather than having to have a special set of same to use for backgrounds.

Yup... Images are a different animal.

I just found this thread...

I have tried to put the image in the background of the page using "Add HTML/CSS Inserts" using the code:
/* background image for home page */
body.home td#middle(background-image: url("http://atlanticprojects.com/wp-content/uploads/2010/06/illustration3x1031.jpg");

background-position: center left;
background-repeat: norepeat;
}

It is not working:
I want to do two things:
1) Place image to background of front page center body only
2) Snug the image up toward the nav bar without padding - figured using a background image would allow me to also place type/or graphics over the background image
But it is not working and maybe is not the best way to approach this.
I have been able to add a background color but not able to add an image.
Any suggestions or directions?

Below is the site I am working on:

http://atlanticprojects.com/

Wordpress v3.1
Atahualpa 3.5.1
Les

Try just a couple of changes. You had a left parenthesis instead of a left curly brace and you had norepeat instead of no-repeat.

You are correct! Thanks.
I think I had gone blind to the details by the time I looked at it too long.
I would really like to nudge that image up against the nav bar - do you know how this might be done??
http://atlanticprojects.com/
Thanks again.
Les

Look in ATO>Add HTML/CSS Inserts>CSS Inserts for a padding on td#header and remove it.