full width image - crop and center image at smaller screen sizes and keep text centered?

hi folks,

i have an animation i'm using as the header of my page.  it consists of a background image and a few animated text blocks that are centered over the image.

i'd like to have the image stretch to full width of the browser window, keeping the image centered at smaller screeen sizes.  i'd also like to keep the text blocks centered on smaller screen sizes as well.

the issue that i'm having is that at smaller widths, the image 'sticks' to the left side of the browser window and does not remain centered.  ultimately i want to 'crop' the sides, but keep the image and text centered.  the comp stage has a min-width to keep it from getting too small on smaller screens.

here's an example of what's going on.  hope this helps.

the edge comp is nested in a div - the div it lives in has the following properties.

.page-header-animation {

    min-height: 400px;

    overflow:hidden;

    width:100%;

    text-align:center;

}

and at smaller screens i have a media query

@media only screen and (max-width: 768px) {

.page-header-animation {

      min-height: 300px;

      position:relative;

     }

}

so i want the edge comp to stop scaling down when it reaches 300px height, and center 'crop' it from there.

i have these settings on my stage as well.

please let me know if you have any ideas - I've been struggling with this for a while now!!

THANKS!