Site Customisation - Fullscreen Billboard But Not Fullscreen!

Hi - I have a fullscreen billboard gallery at the top of my page. I like how it looks, and I especially like the combination of text and image as it draws the eye to analyse the image, which I feel enhances the viewing. For this I use a title and subtitle, which I've styled accordingly. But there are some issues:

website: www.matsmithphotography.com - to see what I mean.

1) People don't necessarily know they should scroll down to see more. To address that, I have added links to the top, but honestly I prefer people to know to scroll down. I need to move billboard down so it's half "below the fold", inserting text above, but I don't know how to do that.

2) As the image is full screen (or full window), this means that depending on the aspect ratio of the browser window, it might cut heads off (widescreen) or make text overlap (narrow screen). I would rather address the widescreen issue, as I don't mind text overlapping in some cases, although it would be great to alleviate both.

I do really want to keep my yellow on black title / subtitle text elements that change with each image.

But I think I need the gallery to display in a frame with fixed aspect ratio rather than truncating. I'm aware this will reduce the fullscreen impact (especially on a nice large computer screen) but I guess that's the only option.

Can someone suggest a way to achieve the above?

I tried to remove the billboard and just add a slideshow element to the page but it doesn't allow me to have different text for each image.

Thanks

If you set the billboard to " Below menu & above page content container (fixed width / height ratio) ", it will keep the ratio.

Otherwise you will need to add some media queries to adjust according to the screen size. 

Design -> Edit My Theme -> Additional CSS. Example: 

@media (max-width: 1000px) {
#neatbbslides  { height: 500px !important; }
}

@media (max-width: 800px) {
#neatbbslides  { height: 400px !important; }
}

@media (max-width: 600px) {
#neatbbslides  { height: 320px !important; }
}

@media (max-width: 450px) {
#neatbbslides  { height: 280px !important; }
}

Thanks, I hadn't realised that I already had some CSS overriding the height options. The fixed works fine after I removed that additional CSS, and your media queries worked a treat. Thanks