CODEWITHSUNDEEP
css
Ollie Barker
Ollie Barker

Reputation: 50

fix background-size: cover; issue

I'm trying to create a single page website but I'm having some trouble with getting the basic layout sorted. What I want is when the user visits the site the first div stretches to fill the browser window ( like http://whiteboard.is ). After that the second div is fixed position but i can set a manual height so I can add in a load of content.

I've tried using background-size tags but for some reason it only stretches to fix horizontally. Vertically it just gets set to the min-height: value.

Any ideas why?

HTML

<body>

<section id="first" class="clearfix">
<div class="scanlines"></div>
</section>

<section id="second" class="clearfix">
<div class="scanlines"></div>
</section>

</body>

CSS

#first {
    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;
    }

#second {
    background: url(3.jpg) center no-repeat fixed;
    position: relative;
    height: 8000px;
    width: 100%;
    }

.scanlines { 
    background: url(scanlines.png); 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 25;
    }

Upvotes: 1

Views: 3613

Answers (3)

taylorleejones
taylorleejones

Reputation: 481

We're using JavaScript (jQuery) on http://whiteboard.is to set the size of the first container - I know this is an old post, but I figure it still merits an answer.

Ours it a bit burried with some other code, but the simple answer is this (place this inside your document ready function or other call after the page is loaded).

$('#first').css({
    'height' : $(window).height(),
    'width' : $(window).width()
});

On the Whiteboard site, we store these as variables and use them in various places, but this is a simple answer that should help get you started.

We actually apply this function to a utility class, and use that class throughout the site on elements we want to be sized to the browser window. Also note that it's good to rerun this function when the window is resized.

Markup:

<section id="first" class="clearfix fillscreen">
    <div class="scanlines"></div>
</section>

Javascript:

// the basic function, used with a class instead of an ID
function fillscreen () {
    $('.fill-screen').css({
        'height' : $(window).height(),
        'width' : $(window).width()
    });
}

// run our sizing function on document ready
$(document).ready(function(){
    fillscreen();
});

// run it again anytime the window is resized
$(window).on('resize',function(){
    fillscreen();
});

Upvotes: 2

lockedown
lockedown

Reputation: 614

You might want to try adding some padding-left and padding-right to .scanlines. Be sure to set box-sizing: border-box on .scanlines.

This will force the content to go vertical as well. The content will try to flow horizontally because you have width:100%.

Upvotes: 0

Neil
Neil

Reputation: 55432

The position: absolute on the .scanlines class takes the block out of flow, so that it does not increase the size of its container.

Upvotes: 1

Related Questions