Full-screen header image

Question

Rather than beating around the bush, I'll just come right out and ask:

http://www.platetheslate.com/

What did they do to make this image header? I went in with chrome's property inspector and removed all of the javascript code as well as css, and the image was still stretching. The style inside of the element changes with the window size. I figure there is an event listener involved, but I can't find it.

Can someone explain this to me? thanks.

Answer 1

If you would place it as a background image, you could use the the very handy CSS3 feature

background-size: cover

See Fullsize Background Image with CSS3 background-size for a tutorial of this alternative approach.

Answer 2

It's actually pretty easy to replicate in css:

​img { min-width: 100%; }​

Here's an example:

http://jsfiddle.net/kZXgW/ - try moving the dividers and see it stretch.

You can then add controls to the parent to maintain height, or max-height if you need to constrain it vertically. I don't see any real trickery on the site you referenced, and I can't see a need to. CSS is pretty good at this nowadays.

Answer 3

The width of the actual picture is hard coded:

            <h1 class="title-text"> PLATE THE SLATE No. 6    <em>American      Cheese</em> </h1>
            <div id="h-image"> <img src="http://www.platetheslate.com/wp-content/uploads/2012/10/mfb-american-cheese.jpg" width="1100" height="650" alt="Image" /> </div>

The changing size is :

function resizeText() {

            var topText = $(".title-text");

            var bottomText = $(".title-text em");

            bottomText.css({

                "font-size":getBottomSize(),

                "line-height":getBottomLineHeight()

            });

Answer 4

Here is the .js file that creates this functionality. http://www.platetheslate.com/wp-content/themes/twentyeleven/js/jquery.main.js

Its just some simple jQuery code.