I’ve seen this done in a few different places where the background image resizes to fit the window…I’m wondering if there is a way for this to work for the entire page of a portfolio site so the header, main image and footer always fit on the page…hope that makes sense.
Obviously there would need to be a minimum height, but what I need is for the height to fit the users window size so there is no scrolling…
The site I’m creating won’t have a background image, but that is the only way I have seen it done so far.
Paul from the Javascript forum suggested checking in here for about achieving 100% height.
You obviously can’t have a site that fits all windows without scaling all the elements and that would be silly anyway.
If you just want a background that fills the viewport height then you are probably looking at a sticky footer effect. You can read up on it in the CSS faq (see link in my sig - there is also a faq on 100% height you may find useful).
If on the other hand you want a header and footer always fixed to the top and bottom of the viewport then you are looking at fixed positioning which is something different again.
We’d need to see a picture of your design and what you would expect to happen to the layout at various sizes.
Suffice to say that usually doing none of the above is the best approach and content should dictate what the page looks like Just let it flow and adjust to screen sizes automatically. Everyone expects to scroll vertically so there is no need to avoid this.
Unfortunately my photographer clients prefer sites that do not scroll vertically. My latest client is asking if it is possible to have everything (header, footer, content) adjust to the users window height…I’m still trying to determine if he is just concerned with the home page or if this is something he would like on all pages.
The site I am creating will not have a background image…you are welcome to take a look at the current pages at Wegle Photography
Since this is not my first client to express concern about scrolling I figured it is best to start looking into options other than designing to a 600px max height.
You could certainly use media queries to swap background images for smaller background images depending on the sites width and height. It would be a little awkward to change any foreground images without using scripting of some sort.
Here’s some links that show media queries in action.
If your clients don’t like scrolling then perhaps they can show you a site that performs the way they want. It seems that they are looking for something like a flash site instead.
I’d be inclined to use a fixed header and footer and then use either javascript scaling or css scaling to scale the image within the remaining space. The image quality may suffer though.
The javascript/jquery link you provided looks like it might be what I want.
I think I may have miss worded what I am looking for, but just to be extremely clear…there is no background image on the site I am creating…I was just using it as an example!
Given a standard three-level vertical split of header/content/footer, is it possible for CSS to to give the content a flexible vertical height, so that the footer always remains at the bottom of the page?
Here was my attempt at adding a little js to resize the image but needs Paul W’s magic touch as I don’t think the logic is sound (and of course needs to be made to work on multiple images and not just the one image).
As I’m continuing to play with this I’m wondering if it really is the right thing as it doesn’t seem like the image is resizing so much as the footer is covering it up…not really what I’m after, I want to see the whole image.
The element with class=“x” is the trick that vertically aligns the image and cannot be omitted.
The page will work without javascript but the image won’t scale as nicely. The js checks if the height is too tall abd if so makes sure the width of the image doesn’t keep getting any wider.
Yes that’s because you omitted the important bits from my routine and basically you are just hiding the image whereas mine is being scaled within limits and vertically centred.
Paul I really appreciate all your help, but I still cannot seem to get this working. I have added the javascript and the x class, but still no bueno. Does the fact that this site is in wordpress make any difference?
Thanks for the move Paul W…I appreciate all the help and hard work both of you have given me on this situation. I didn’t realize there was a wordpress forum, hooray!
If you nest extra elements or don’t keep the b element next to the image then you break the structure. As soon as you nest another element you break the routines because there is no longer any height to work with.
You need to strip away everything that is not needed and end up with a structure as in my example above which shows that it will work once everything is in the right place.
#outer contains the available space between footer and image and the class=“x” must be 100% height of this space because it then forces the image to vertical-align within that space. (See here for the details of the technique).
If you add extra nested elements inside then you break that relationship and nothing will align.
ugh…I’m headed to redesign. Thank you so much for the help, I truly, truly appreciate it. Hopefully after redesign the client won’t be throwing any other curveballs my way.