Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

[SOLVED] Help with background image please.


  #1  
Old Apr 30, 2011, 08:59 PM
pierrebk4
 
9 posts · Jan 2011
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:
Code:
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):

Code:
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
  #2  
Old Apr 30, 2011, 10:05 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
HTML Code:
body.page-id-49 {background: url(http://www.lorensquires.com/wwlinsite.com/wp-content/uploads/background-taller-1300.jpg) no-repeat !important;}
__________________
~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 Apr 30, 2011, 11:32 PM
pierrebk4
 
9 posts · Jan 2011
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
  #4  
Old May 1, 2011, 06:36 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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
__________________
~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 May 1, 2011, 10:50 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old May 1, 2011, 11:48 AM
pierrebk4
 
9 posts · Jan 2011
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:

Code:
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:

Code:
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

Bookmarks

Tags
background image

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] css background image: a top image, followed by a tiled image? derekwbeck Header configuration & styling 7 Nov 4, 2010 12:57 PM
[SOLVED] Background image and background colour mattf Atahualpa 3 Wordpress theme 8 Apr 11, 2010 06:21 AM
background image over-sized - Full Page Background Image prokopino Atahualpa 3 Wordpress theme 2 Mar 30, 2010 04:42 AM
[SOLVED] How to get a background image show thru background color juggledad Header configuration & styling 3 Apr 18, 2009 05:03 AM
Changing repeated background image forces each page to reload background doctorrobert Atahualpa 3 Wordpress theme 8 Feb 15, 2009 06:36 AM


All times are GMT -6. The time now is 06:25 AM.


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