HTML Help

NikRo · Joined: 18 Sep 2009 Posts: 2

I'm attaching an example of the layout I want to convert from PS to HTML.

Everything is fairly easy and basic to me except how I should position the grass at the very bottom. It's ultimately an ecommerce site, and if you notice, the bottom footer image crosses into the content area.

I've tried breaking the image into two sections and putting them as background images for tables, but it's still going to be a pain when someone is viewing in a higher resolution. I also thought about making the entire gradient/ grass combo the image background for the entire site, but I'll still have issues with resolution, and it's kind of tacky imo. I also need to make sure that when the actual catalogue content gets populated through the php scripts that it doesn't break the tables and screw up the bottom.

Is there a solution for this? Any suggestions? It doesn't seem like it should be as hard as I'm making it out to be!

Thank you so much for your time,

NikRo

sticks464 · Joined: 31 Dec 2006 Posts: 2625

I would make the gradient the body background and the grass a background of a containing div that holds all the content.

example:
Code: body {
background: url(path_to_gradient_image) no-repeat fixed top left;
}
#container {
width:100%;
position:relative;
background: url(path_to_grass_image) no-repeat bottom center;
padding-bottom: 100px;
}

Code: <body>
<div id="container">
all content goes here...
</div>
</body>
</html>

The bottom padding on the container div should equal the height of the grass image. Or you could add bottom padding to the footer to push the container down until the image is where you want it to appear.

NikRo · Joined: 18 Sep 2009 Posts: 2

Thanks, but I think we figured it out.