Separate background images for Pages

flieg · #1 Aug 25, 2010, 05:07 PM

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.

lmilesw · #2 Aug 25, 2010, 08:53 PM

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

HTML Code:

body.home {
background: url(/wp-content/themes/atahualpa353/images/background1.gif) repeat top left;
}

would use background1.gif on the home page.

OR

HTML Code:

body.page-id-88 {
background: url(/wp-content/themes/atahualpa353/images/background2.gif) repeat top left;
}

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"

flieg · #3 Aug 25, 2010, 11:53 PM

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)

lmilesw · #4 Aug 26, 2010, 12:04 AM

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

flieg · #5 Aug 26, 2010, 12:20 AM

Quote:

/* background image for home page */
body.home {
background: url(/wp-content/uploads/2010/08/Earthrise_cr.jpg)
norepeat top left;
}

OK, this went right below a bunch of entries for

Quote:

/* reset 2nd+ level */

And thanks for the quick reply.

lmilesw · #6 Aug 26, 2010, 01:27 AM

Try using the full path to the image.

flieg · #7 Aug 26, 2010, 01:37 AM

OK, the code now reads:

HTML Code:

/* background image for home page */
body.home {
background: url(//horanda.com/wp-content/uploads/2010/08/Earthrise_cr.jpg)
norepeat top left; 
}

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

Quote:

body.home {
}

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"

lmilesw · #8 Aug 26, 2010, 08:36 AM

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.

HTML Code:

/* background image for home page */
body.home {
background-image: url(http://horanda.com/wp-content/uploads/2010/08/Earthrise_cr.jpg);
background-color: #000000;
background-position: center top;
background-repeat: norepeat;
}

flieg · #9 Aug 26, 2010, 03:18 PM

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

HTML Code:

<body class="home page page-id-16 page-template page-template-default logged-in">

about halfway through the hierarchy is the code

HTML Code:

<div id="post-16" class="post-16 page type-page hentry post">

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")

HTML Code:

body.home {
background-image:url("http://horanda.com/wp-content/uploads/2010/08/Earthrise_cr.jpg");
background-position:center top;
}

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.

lmilesw · #10 Aug 26, 2010, 03:56 PM

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

flieg · #11 Aug 26, 2010, 04:51 PM

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:

HTML Code:

opacity: 0.1;
-moz-opacity: 0.1
filter:alpha(opacity=10);

to the code for body.home but that faded the text and other content, not the background image.

I also tried:

HTML Code:

background-opacity: 0.1;
background-moz-opacity: 0.1;
background-filter:alpha(opacity=10);

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...

lmilesw · #12 Aug 26, 2010, 05:44 PM

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.

HTML Code:

body.home td#middle {
background-image:url("http://horanda.com/wp-content/uploads/2010/08/Earthrise_cr.jpg");
background-position:center top;
}

flieg · #13 Aug 26, 2010, 08:17 PM

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.

flieg · #14 Aug 26, 2010, 08:55 PM

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.

lmilesw · #15 Aug 26, 2010, 09:03 PM

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?

flieg · #16 Aug 26, 2010, 09:35 PM

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.

lmilesw · #17 Aug 26, 2010, 10:08 PM

Yup... Images are a different animal.

jorgfoto · #18 Aug 31, 2010, 10:25 AM

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

lmilesw · #19 Aug 31, 2010, 02:17 PM

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.

HTML Code:

body.home td#middle {
background-image: url("http://atlanticprojects.com/wp-content/uploads/2010/06/illustration3x1031.jpg");
background-position: center left;
background-repeat: no-repeat;
}

jorgfoto · #20 Sep 1, 2010, 06:22 AM

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

lmilesw · #21 Sep 1, 2010, 09:39 AM

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