CSS background positioning

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Free FrontPage Templates

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

CSS background positioning

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> CSS background positioning

Page: [1]

mshin

Posts: 11
Joined: 10/8/2004
Status: offline

CSS background positioning - 8/22/2005 13:37:59

I would like a left side nagivation div which expands with the height of the page-- meaning the height of the page is determined by the content div to the right of the navigation.

What I would like to have is two background images. One positioned at the very top of the navigation div for which use the following CSS:

ackground: transparent url('images/nav-top.gif') no-repeat top left;

My problem is that I have another background image which I would like to position at the very bottom:

background: transparent url('images/nav-bottom.gif') no-repeat bottom left;

Can someone give me a suggestion as to how to accomplish this?

I also have another problem, how do you specify that a div should expand the full height of the generated page?

I'm using:

width: 200px; height: 100%;

but that doesn't seem to expand to the entire height of the page.

Thumbnail Image

One note: The background image nav-bottom.gif is not visible at this quality but notice it is positioned only at 100% the height of the original page before I expand the tree selections.

Attachment (1)


Tailslide Posts: 6296 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: CSS background positioning - 8/22/2005 14:05:48 The only way to have a background image expand in a div when there's no content in it is to use the "faux-columns" technique. Have a google - there's lots of explanations on the method. What you do depends on the structure of your page. If you have two floating divs (main right, smaller left) then I'd put another div around them and attach a background image to that so that it goes all the way down. You'll need to be sure you sort your "clearing" out otherwise the containing div won't expand to encompass the floating ones. Again, Google is your friend on that one!! If you have a main div with the nav floating left in it then you can put the full width background image in that and it will be as long as its own content and will look like both columns are the same length. _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to mshin)


c1sissy Posts: 5086 Joined: 7/20/2002 From: NJ Status: offline	RE: CSS background positioning - 8/23/2005 9:37:22 Hi if you go to A list aparts site via the following link, there is an excellent article on this that you can read. I suggest printing it so that you can study it better. Hope this helps you out a bit. http://alistapart.com/articles/fauxcolumns _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to Tailslide)