CODEWITHSUNDEEP
htmlcssstretch
Ollie Barker
Ollie Barker

Reputation: 50

Image won't stretch vertically to browser size

I'm trying to have a large background image stretch to the size of the browser window when a user first goes on the site. From this they navigate down through the rest of the site but you don't see it regardless of the size of the browser window without scrolling ( http://whiteboard.is is a good example of this ).

I'm using the code below and while it stretches horizontally it won't stretch vertically past the min-height. Any ideas?

HTML

<body>
<section id="first-section">
</section>
</body>

CSS

body, html  {
    font-family: Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    }

#first-section {
    background: url(1.jpg) no-repeat center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-width: 1024px;
    min-height: 768px;
    }

Upvotes: 1

Views: 2278

Answers (1)

sandeep
sandeep

Reputation: 92803

May be you can write height:100% also.

#first-section {
    background: url(1.jpg) no-repeat center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-width: 1024px;
    min-height: 768px;
    height:100%;
    }

Upvotes: 2

Related Questions