html - Why isn't my image aligning bottom?

Question

I feel like this is an easy fix but my code isnt working and I'm not sure why.

I want to align the 'voip innovations:your premier wholesale voip carrier' image to the bottom of the div. I made the bottom green for reference.

I tried

#cityBackground{
    position:relative;
    display:table-cell;
    vertical-align: bottom;
    background-image:url(../images/city_background_line_vi.jpg);
    background-repeat:repeat-x;
    height:500px;
    background-color:green;

}

    #cityBackground img{

        vertical-align:bottom;
        display:block;
        margin-left: auto;
        margin-right: auto;

    }

But it doesnt seem to work.

Here is a link to the site

Link

Is there something I'm missing here?

• EDIT -

Sorry I didnt explain clear enough. I dont want the background-image moved down. I want the logo moved down.

Picture for reference

Answer 1

The CSS property background-position controls where the image sits, not vertical-align. Vertical-align is for content. A background image is not content.