Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

Separate background images for Pages


  #1  
Old Aug 25, 2010, 04:07 PM
flieg
 
21 posts · Aug 2010
California
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.

Last edited by flieg; Aug 25, 2010 at 04:39 PM.
  #2  
Old Aug 25, 2010, 07:53 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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"
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Aug 25, 2010, 10:53 PM
flieg
 
21 posts · Aug 2010
California
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)

Last edited by flieg; Aug 25, 2010 at 11:02 PM.
  #4  
Old Aug 25, 2010, 11:04 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
Could you post the code you used in CSS Inserts. I just want to check the syntax.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Aug 25, 2010, 11:20 PM
flieg
 
21 posts · Aug 2010
California
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.
  #6  
Old Aug 26, 2010, 12:27 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
Try using the full path to the image.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Aug 26, 2010, 12:37 AM
flieg
 
21 posts · Aug 2010
California
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"

Last edited by flieg; Aug 26, 2010 at 12:53 AM.
  #8  
Old Aug 26, 2010, 07:36 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #9  
Old Aug 26, 2010, 02:18 PM
flieg
 
21 posts · Aug 2010
California
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.
  #10  
Old Aug 26, 2010, 02:56 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #11  
Old Aug 26, 2010, 03:51 PM
flieg
 
21 posts · Aug 2010
California
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...
  #12  
Old Aug 26, 2010, 04:44 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #13  
Old Aug 26, 2010, 07:17 PM
flieg
 
21 posts · Aug 2010
California
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.
  #14  
Old Aug 26, 2010, 07:55 PM
flieg
 
21 posts · Aug 2010
California
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.
  #15  
Old Aug 26, 2010, 08:03 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #16  
Old Aug 26, 2010, 08:35 PM
flieg
 
21 posts · Aug 2010
California
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.
  #17  
Old Aug 26, 2010, 09:08 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
Yup... Images are a different animal.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #18  
Old Aug 31, 2010, 09:25 AM
jorgfoto
 
39 posts · Jul 2009
vermont, USA
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
  #19  
Old Aug 31, 2010, 01:17 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #20  
Old Sep 1, 2010, 05:22 AM
jorgfoto
 
39 posts · Jul 2009
vermont, USA
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
  #21  
Old Sep 1, 2010, 08:39 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
Look in ATO>Add HTML/CSS Inserts>CSS Inserts for a padding on td#header and remove it.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Bookmarks

Tags
background image, individual page

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Link header images to separate pages andreapalframan Header configuration & styling 5 May 28, 2010 11:59 AM
Adding space in category meny bar + separate RSS for separate categories? jenny_li Page & Category Menu Bars 2 May 10, 2010 05:57 AM
[SOLVED] Separate Headers for Posts and Pages arothafel Header configuration & styling 11 May 9, 2010 01:03 PM
[SOLVED] Help! I'm losing background images on pages and widgets berkleegrad Atahualpa 3 Wordpress theme 2 Mar 18, 2010 08:06 AM
Background images in pages ErikU Atahualpa 3 Wordpress theme 10 Apr 16, 2009 07:36 PM


All times are GMT -6. The time now is 02:53 PM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.