By PD on

Hi all,

I'm currently working with a Zen theme and got a fixed background covering the whole page atm.

What i would like is to put a repeated image as background of the page-bottom region and have it spread over the whole length of the browser (with height like 100-150) that sticks to the bottom of the page at all times, doesn't move up if there's less content for example.

There i'd display twitter posts with twitter_db (this i have working).

Question being, how can i put that repeated image as background in the page-bottom region and having it stick tot he bottom?

Thanks for the help,
PD

⋅ Categories: Drupal 7.x

Comments

liz.oh’s picture

liz.oh commented

I was able to wrap regions in

, and then style the div in CSS.

Here's my triptych from my page.tpl.php file:

<div id="triptych">	
				<?php if ($page['left']) { ?>	
					<div id="left">
					<?php print render ($page['left']); ?>
					</div><!--end left triptych-->
				<?php } ?>
				<?php if ($page['center']) { ?>	
					<div id="center">
					<?php print render ($page['center']); ?>
					</div><!--end center triptych-->
				<?php } ?>
				<?php if ($page['right']) { ?>	
					<div id="right">
					<?php print render ($page['right']); ?>
					</div><!--end right triptych-->
				<?php } ?>
				<div style="clear:both"></div> 
			</div><!--end triptych container-->

And here's some CSS from style.css:

#triptych {
	width: 650px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
}

#left {
	float: left;
	width: 210px;
	padding-right: 10px;
}
ergunk’s picture

ergunk commented

You can do that with a CSS code like this(I assume you have a wrapping div with "page-bottom" ID for that region:

#page-bottom {
background-image: url('your-background-image.png');
background-repeat: repeat-y;
background-position: left bottom;
}


Mediasaur | http://www.mediasaur.com/en | http://twitter.com/mediasaur

Before asking for help, please read this http://slash7.com/2006/12/22/vampires/ and don't be a "Help Vampire". :)