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 » Post-Kicker, -Byline & -Footer »

[SOLVED] Footer background image issue


  #1  
Old Mar 17, 2013, 01:20 PM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
I have finally gotten my footer image to repeat, but some how a background color is being added. The image http://takerootmontgomery.org/wp-con.../footer-bg.png is a .png and has a transparent background. I don't know where the #FFFFFF background is coming from.

I have looked thru all the ATO settings and have looked at the code via source view and firebug. I can't seem to find where the background color is being added. If someone could take a look at my code, I would appreciate it. I feel like its right in front of me, but because I've been looking at it so intensely that i'm just missing it.

FOOTER HTML
HTML Code:
</td></tr></table></div></div>
<div id="divfooter"><div><table id="tablefooter">
<tr><td>
<div style="margin-top:35px;"><span style="font-size:12px;">PLANT. GROW. SUSTAIN.</span>&copy; %current-year% %home%  |  Montgomery, AL |  <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank">CC License</a></div>
FOOTER CSS
HTML Code:
div#divfooter {
background:url(http://takerootmontgomery.org/wp-content/uploads/2013/03/footer-bg.png) repeat-x bottom center;
font-size:10px;
padding:10px;
color:#FFFFFF;
height:100%;
weight:100%;
}


table#tablefooter {
margin:auto;
}

Last edited by gr870sfunk; Mar 17, 2013 at 08:01 PM.
  #2  
Old Mar 17, 2013, 02:35 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Have you looked at it with firebug to see where it may be inherited from?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Mar 17, 2013, 02:57 PM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
I've looked everywhere. I have gone over it with a fine-toothed comb. I have narrowed it down to it having to be in this bit
HTML Code:
</td></tr></table></div></div>
<div id="divfooter"><div><table id="tablefooter">
<tr><td>
because when I take it out and just have the single non-repeating image there, it's as it should be. But I can't seem to find out where it's coming from b/c it isn't in my CSS.
  #4  
Old Mar 17, 2013, 04:22 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
well without access I can't do much...
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Mar 17, 2013, 04:37 PM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
The site is now active, Juggle. Thanks!

http://takerootmontgomery.org/
  #6  
Old Mar 17, 2013, 07:39 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Actually there is nothing wrong, it's just not what you want

You have added a new area to the page which extends the BODY but not the WRAPPER - it is at the same level as the WRAPPER, just wider.

Now the coltwo has the background image and it is repeated to the botom of the WRAPPER and ends, then the new area DIVFOOTER starts up

You are going to have to try adding a 'position' and top or bottom to try and move it up so it overlaps the WRAPPER
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Mar 17, 2013, 07:52 PM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
That doesn't make any sense because if I leave the CSS and HTML the way they are but delete the background image, I am left with a white strip as the footer and it isn't the image I'm using for coltwo.
  #8  
Old Mar 18, 2013, 04:31 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I know it is a hard thing to wrap our head around but the white space that remaind is just the area of the window that is taller than the content height.

to show this, do this. Add the following to the CSS Inserts
HTML Code:
body {border: solid 1px red;	}
#wrapper {border: solid 1px green;	}
and look at the page. Next make the window taller than the content. Notice the red (the body) stops at teh end of the new footer you added, but the green border showing the wrapper (wich coltwo is inside of) stops above your new footer.

now remove your new footer code and refresh the page and you will see teh bottom border of the body and wrapper are the same, but there is white space behind it - that is the area of the window that is taller than the body. Resize the window so you get a scrool bar and then scrool down. It will stop when the bottom of the body shows.

now you could see if the 'Sticky footer on short pages?' option would help...
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Mar 18, 2013, 09:46 AM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
Wow using the borders really helped me see what you were talking about. Thank you so much!

So now, using "top" I have gotten the footer to come up above the wrapper, but now i'm left with a large white strip underneath the footer due to it's having moved. Ideally, I would like to get rid of it, but I could live with it being the same green as the image. Any idea how I might achieve this?

Last edited by gr870sfunk; Mar 18, 2013 at 10:33 AM.
  #10  
Old Mar 18, 2013, 10:48 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
why not put your code in the footer and give the div a width of 100% - you may need to use a negative margin to move it down.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Mar 18, 2013, 10:59 AM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
To which code are you referring? This?

HTML Code:
div#divfooter {
background:url(http://takerootmontgomery.org/wp-content/uploads/2013/03/footer-bg.png) repeat-x bottom center;
font-size:10px;
color:#FFFFFF;
padding:10px;
position:relative;
top:-30px;
}
  #12  
Old Mar 18, 2013, 12:15 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
no, you closed off the actual footer, get rid of that so what you have in the footer is this
HTML Code:
<div id="divfooter">
<span style="font-size:12px;">PLANT. GROW. SUSTAIN.</span> &copy; 2013 <a href="http://takerootmontgomery.org/">Take Root Montgomery</a>  |  Montgomery, AL |  
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank">CC License</a>
</div>    
    
<script type='text/javascript' src='http://takerootmontgomery.org/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.25.0-2013.01.18'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = {"loaderUrl":"http:\/\/takerootmontgomery.org\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"Sending ..."};
/* ]]> */
</script>
<script type='text/javascript' src='http://takerootmontgomery.org/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=3.3.3'></script>
in CSS inserts change the CSS to
HTML Code:
div#divfooter {
background:url(http://takerootmontgomery.org/wp-content/uploads/2013/03/footer-bg.png) repeat-x bottom center;
font-size:10px;
color:#FFFFFF;
padding:10px;
position:relative;
    margin-left: -224px;
    top: 0;
    width: 153%;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old Mar 18, 2013, 02:39 PM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
Here's what I ended up with.

HTML Code:
<div id="divfooter">
<div style="margin:35px 0 0 -150px;"><span style="font-size:12px;">PLANT. GROW. SUSTAIN.</span> &copy; 2013 <a href="http://takerootmontgomery.org/">Take Root Montgomery</a>  |  Montgomery, AL |  
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank">CC License</a>
</div>    </div>
With this CSS:
HTML Code:
div#divfooter {
background:url(http://takerootmontgomery.org/wp-content/uploads/2013/03/footer-bg.png) repeat-x bottom center;
font-size:10px;
color:#FFFFFF;
padding:10px;
position:relative;
margin-left: -524px;
top: 0;
width: 250%;
height:50px;
}
It's not perfect because it side scrolls, but I don't think anyone will notice. Thank you so much Juggle for all your help on this. I really appreciate it.

Bookmarks

Tags
background color, background image, footer, repeat

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Footer widgets and full-width footer background image problem Viktoria Sidebars & Widgets 4 Dec 2, 2012 03:06 PM
footer background image? sabz Atahualpa 3 Wordpress theme 1 Feb 8, 2012 12:18 PM
Footer image issue - too high! Jennifer420 Post-Kicker, -Byline & -Footer 1 Aug 7, 2009 05:57 AM


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


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