Question

I have DIV element which only has a few lines in and a background image.
The image size is 335px height.

I want the the div’s max-height to be 335px but allow it to shrink if the browser window is smaller(mobile).

But the div just stays the size of the paragraph in the div.
This is my CSS code for the DIV. Any ideas on how i can set the default starting height to 335px but allow it to shrink? The max width works perfectly.

#header
{
    background-image: url('Images/Header.png'); 
    margin: 0 auto;
    max-width:1024px; 
    max-height: 335px;
    background-size: 100% 100%;
    height: 100%;
    overflow: auto;
    --max-line-height: 335px;
}

Many Thanks D

Answer 1

Try this CSS –

#header{
    background-image: url('Images/Header.png');
    margin: 0 auto;
    max-width:1024px;
    height: 335px;
    background-size: 100% 100%;
    overflow: auto;
    border: 1px solid #f00;
}

And for mobile devices use CSS Media Queries http://www.alistapart.com/articles/responsive-web-design/

@media only screen and (max-device-height: 335px) {
 #header{
        height: auto;
    } 
}