image fills the width of the screen but height of viewable part remains fixed

I trying to create a banner area on my site which stretches across the width of the screen, no matter the screen size, but stays the same pixel height (576px) at all times.

In the banner I want to put an image and I want the image to zoom in so that it if the users screen is wider than the image it stretches to cover the width of the screen, but then cuts off the top and bottom of the image so the viewable area is always 576px height.

Likewise when the screen gets narrower than the image, it the viewable area is always as wide as the screen and the height always 576px with the image centered and any excess areas cut off.

Exactly like they have here: (I've looked at the source and tried to figure out what they're doing but to no avail) http://www.royalflyingdoctor.org.uk/

The closest I've got is this which causes the images to get shorter if the screen gets too narrow:

<div class="bannerImg">
    <img src="/img/home_img_first.jpg" alt="" />
</div>    

.bannerImg {width: 100%;
min-height: 576px;
max-height: 576px;
overflow: hidden;
text-align: center;}
.bannerImg img {width: 100%;}

Answers


You should use a background image with a background size of cover. For example:

.bannerImg { 
  background: url(/img/home_img_first.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

For more info see this enter link description here


Need Your Help

Check everything in one list again another, causing a stack overflow

java android stack-overflow

Basically, I'm trying to check an arrayList of numbers against another ArrayList of numbers, As I want to see if anything in my TempPositionList, is in my Visited words list, however because Visisted

Deleting row with html button

php html mysql sql-delete

I am creating an delete function.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.