CODEWITHSUNDEEP
htmlcsscross-browserpositionmargin
user3003228
user3003228

Reputation: 47

How to have div cover page on all resolutions/browsers?

Hi I am trying to have a cover photo fill the entire page, BUT not have it fixed. I would like it so that once you start scrolling the cover photo scrolls and content shows. I have set the height parameters to 900 ish to fit most screens but I am looking for a way to has it cover all browsers/resolutions. Also the cover photo does not show up properly in EI. It is extremely zoomed in.

HTML

<body>

<div id="container">

    <div id="header">

    </div>

</div>

CSS

body{
    margin:0;
    background:#F9F9F9;
    /*This is to cut off the white border around the webpage*/
}

#container {
    position: relative;
    min-width: 1366px;
    max-width: 2048px;
    margin: 0px auto; 
    width: 100%;
}

#header {
    background: url('../images/cover6.jpg') no-repeat;
    background-size:100% 100%;
    width: 100%;
    margin:0px auto;
    height: 950px;
}

Upvotes: 0

Views: 23

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78530

One IE9+ solution that could work for you is to use background-size:cover; which generally has good compatibility. You would need to adapt your styles to use percentages instead, but cover does a good job of keeping the entire container showing an image. Here's your code adapted to use this method

html, body {
    height: 100%;
    margin:0;
}

#container {
    position: relative;
    height: 100%;
}

#header {
    background: url('//placehold.it/2000x1000') no-repeat center;
    background-size: cover;
    height: 100%;
}
<div id="container">

    <div id="header">

    </div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
    This is some extra text<br/>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
    This is some extra text<br/>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
    This is some extra text<br/>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
    This is some extra text<br/>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
    This is some extra text<br/>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
    This is some extra text<br/>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
    This is some extra text<br/>
</div>

and a demo on jsfiddle

http://jsfiddle.net/fqe86j9c/

Upvotes: 1

Related Questions