Hi there, I was hoping some kind soul here could steer me in the right direction.

I want to have it so that the trucks background is always aligned on the bottom just before the footer, like on the home page.

http://www.barr-nunn.com/careers/?page_id=24

Does anyone have any suggestions on how I could get that done?

Thanks!

Well, to align backgrounds, you can just use background-position in CSS. To align it to the bottom, just put background-position:bottom; on the div, and that should snap the image to the bottom.

I did this, which fixed it in Chrome.

* Add 100% height to html and body. I think you also want to zero their padding and margins. For example:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

* Change the min-height of #page from 850px to 100% (on line 74 in style.css), as in:

#page {
    max-width: 950px;
    margin-right: auto;
    margin-left: auto;
    min-height: 100%;
}

* Add a clearing div at the end of #page, so that it looks like this:

<div id="page" class="hfeed">
    <header id="branding" role="banner">
        ...
    </header>
    <!-- #branding -->
    <div id="main">
        ...
    </div>
    <!-- #main -->

    <!-- ADD THIS LINE -->
    <div style="clear:both;"></div>

</div>

worked like a charm!

http://www.barr-nunn.com/careers/?page_id=26

You're a scholar and a gentleman, thanks so much for your help.

Are you having an issue with the over lapping text at the bottom ?

umm... not that I was aware of... site looks fine to me actually. If something looks wonky to you, please let me know.

The text that overlaps the windscreen of the truck at the bottom is kind of hard to read. Dark text on a dark background. Maybe a white (or some other light color) semi-transparent container for the text would look nice, and still show the trucks.

Oh, yeah, should have mentioned that those will be thrown into a jquery accordion with a fixed height so that should negate that issue.

if anything I'll just through a solid color around them.

Originally Posted by Reckoner

http://www.barr-nunn.com/

Nothing at all to do with CSS, just that I love that domain/company name.


Why don't they have a by-line/tag-line of:

We are the best - Barr-Nunn.

Being a play on ->http://dictionary.reference.com/browse/bar+none