Wordpress Themes - WP Forum at BFA - [SOLVED] Footer background image issue

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Post-Kicker, -Byline & -Footer (http://forum.bytesforall.com/forumdisplay.php?f=17)

- - [SOLVED] Footer background image issue (http://forum.bytesforall.com/showthread.php?t=19916)

gr870sfunk

Mar 17, 2013 12:20 PM

[SOLVED] Footer background image issue

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;

}

juggledad

Mar 17, 2013 01:35 PM

Have you looked at it with firebug to see where it may be inherited from?

gr870sfunk

Mar 17, 2013 01:57 PM

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.

juggledad

Mar 17, 2013 03:22 PM

well without access I can't do much...

gr870sfunk

Mar 17, 2013 03:37 PM

The site is now active, Juggle. Thanks!

http://takerootmontgomery.org/

juggledad

Mar 17, 2013 06:39 PM

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

gr870sfunk

Mar 17, 2013 06:52 PM

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.

juggledad

Mar 18, 2013 03:31 AM

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

gr870sfunk

Mar 18, 2013 08:46 AM

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?

juggledad

Mar 18, 2013 09:48 AM

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.

gr870sfunk

Mar 18, 2013 09:59 AM

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;

}

juggledad

Mar 18, 2013 11:15 AM

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%;

}

gr870sfunk

Mar 18, 2013 01:39 PM

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.

All times are GMT -6. The time now is 05:10 AM.