Secondary bg image in worpress?

tim_getdim · July 13, 2012, 5:22pm

I am almost finished with my wordpress installation for a blog on my website, but i am having one problem.

The “body2” and footer sections of the rest of my website extend across the entire screen, like a background image or bg color.
my problem is figuring out how to do this in wordpress.
I have a header bg image, that was easy enough, but how can i make the footer extend across as well?
being as pages will vary in length, i cant use a fixed height image with whitespace between the header and “body2” sections, because the body content may extend beyond that fixed height.

Is there a way to set a secondary background image, aligning it to the bottom of the page while i have the existing one aligned to the top?
i dont want to go outside of the wordpress 940px width because i want the site to work on mobile devices.

has anyone figured out a way to do this? ive spent several hours on google trying to figure this out. and havent found anyone with a solution thus far.

if you need a point of reference, the website is http://liveoutloudproductions.com/ and the worpress installation is http://liveoutloudproductions.com/blog/

ralphm · July 14, 2012, 2:36am

You’ll need to take those divs out of the wrapper div and wrap them in their own 100%wide wrapper divs, then set them to width 940px and center them.

On your other pages, you have these divs inside <font> tags, which is not good at all.

tim_getdim · July 16, 2012, 1:30pm

I will look into the <font> tags.
I didnt build the rest of the site but when i have the extra time ive been slowly trying to clean up the code. its a slow and annoying process.
Thanks

tim_getdim · July 16, 2012, 2:02pm

OK that halfway worked.

but now both body 2 and footer divs are moved left, aligning them center is doing nothing and the background for the new wrapper4 class isnt working or isnt extending the width as it should.


#footer {
margin-left: 0;
padding-top:0px;
 padding-bottom:20px;
  color:#fff;
   text-transform:uppercase;
    font-size:10px;
	background-color:#252525;
	height:8px;
	width:940px;
		}

#wrapper4 {
	margin: 0 auto;
	width: 100%;
}
#wrapper4 {
	background: #323232;
	margin-top: 0px;
	padding: 0 0px;
}

#wrapper3 {
	margin: 0 auto;
	width: 100%;
}
#wrapper3 {
	background: #ebebeb;
	margin-top: 20px;
	padding: 0 20px;
}

.wrapper2 {background: #ebebeb;
	width:100%;
	text-align:left; /* === We still hate IE === */
	z-index:100;
	overflow:hidden;
}

.body2{ width: 940px; }

And this funkyness is happening which i dont understand at all:

i did list the site earlier its liveoutloudproductions.com/blog

tim_getdim · July 16, 2012, 5:37pm

update: ive gotten things partially fixed. current screenshot is here:

ralphm · July 16, 2012, 11:51pm

Start off by removing the code in red and adding the code in blue:


#wrapper4 {
background: #323232;
margin-top: 0px;
padding: 0 0px;
[COLOR="#0000CD"]overflow: hidden;[/COLOR]
}


#footer {
[COLOR="#FF0000"]margin-left: 0; [/COLOR] 
padding-top: 0px;
padding-bottom: 20px;
color: white;
text-transform: uppercase;
font-size: 10px;
background-color: #252525;
[COLOR="#FF0000"]height: 8px;  
width: 940px; [/COLOR]
}


#colophon {
[COLOR="#FF0000"]background: #353535; [/COLOR]
border-top: 4px solid #353535;
margin-top: -4px;
overflow: hidden;
padding: 0;
}


.footp {
[COLOR="#FF0000"]margin-left: 300px;[/COLOR]
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px !important;
[COLOR="#0000CD"]text-align: center;[/COLOR]
}

tim_getdim · July 23, 2012, 2:00pm

it worked. eggsalad!

ralphm · July 23, 2012, 2:30pm

Glad to hear it. (Eggs make me a bit ill, though, so keep the salad. )

tim_getdim · July 23, 2012, 2:37pm

Apologies - its my super nerd way of saying excellent

ralphm · July 23, 2012, 2:42pm

Heh heh, I figured that. (If I wrote in these forums like I speak at home—with all my quirky phrases—I’d be unintelligible … :eyebrow: )

tim_getdim · July 23, 2012, 3:09pm

understood. glad my N3RD-isms are not lost on others

tim_getdim · September 13, 2012, 6:13pm

Sorry to re-hash an old issue, but for various reasons i am having to redo this site.
The difference being i needed to recreate the entire site in wordpress, while maintaining the blog in its existing location.
I started with an exact copy of the wp installation moved to a different folder.
i copied the database and everything.

but as im working on this i see that the problem i had with the body2 and footer sections is happening again.
i went through and checked the stylesheet and the footer.php and everything is exactly the same as the original, so why are my div’s not spanning the width of the screen as they should?

ive gone over this thread and made sure everything in the stylesheet and the footer.php matched the instructions here and i still dont have my full width footer.

ralphm · September 14, 2012, 12:12am

Can you provide a link to the page that’s not working?

tim_getdim · September 14, 2012, 2:06am

http://liveoutloudproductions.com/wp

ralphm · September 14, 2012, 4:05am

It’s the same issue as before, where the wrapper for the footer is stuck inside the main wrapper. Perhaps this is due to a validation error, so make sure to check that all the divs are in the right order and closed off appropriately.

tim_getdim · September 21, 2012, 5:42pm

Maybe im blind, but im not seeing it.
from footer.php:


 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>





	
</div><!-- #main -->
	
</div><!-- #wrapper -->

<div class="wrapper2">

as you can see the main wrapper div ends before the custom wrappers i created start

Also it doesnt make sense that anything would be changed. I copied the site EXACTLY. literally i drag-and-dropped all files from one folder to the other.

can you point out where the wrapper is in the wrong place?

ive sifted through this for hours and im not seeing whats out of place.

as a last ditch effort i opened the original footer.php, copied everything, and pasted it into this file. still having the problem, which tells me it cant be in the footer.php file, because the original installation (same domain/blog) is fine.
so i looked through the stylesheets, im not seeing any differences there either.

where could the problem be?

ralphm · September 22, 2012, 4:56am

At the moment, your footer is inside #wrapper4, which is inside the #wrapper, which in not full width. The validator reports that the wrapper div is not closed, so that’s probably the problem. You’ll be depressed to find that the validator reports 53+ errors on the page, but it’s a good learning experience to check the validator.