Header Stretch: (1) will not shrink to fit iphone (2) how to set max width for desktop?

Question

I am working on a CSS tumblr theme header found here grandneue.tumblr.com.

(1) Stretch: I want it to be able to stretch but only up to a maximum size as the header gets too pixelated otherwise), probably around 800px.

(2) Shrink: The second issue I have is, while the header does shrink down to a certain size (it does when I change the desktop browser window and to a certain extent on the iphone5), it doesn't shrink down fully so it fits 100% on a vertical iphone5 browser display.

Can anyone please help me solve these two queries? The content is totally fine so I don't understand why the header won't follow suit!

Answer 1

Looks like the problem is with the image, there's a lot of white space around the logo. Edit the header image to be 800px width and make sure the logo fits right to the edges. Then set the background properties on .header-image.cover to;

.header-image.cover{
-webkit-background-size: 100%;
-moz-background-size: 100%;
background-size: 100%;
margin: 0 -1px;
}

Then finally make the container div .header-image-wrapper ;

.header-image-wrapper{
max-width: 800px;
}

If on mobile the image is right to the edges, just add padding to the container with a media query :)

Hope this helps!