CODEWITHSUNDEEP
htmlcssresponsive-designmagento-1.9
itsk2015
itsk2015

Reputation: 7

Responsive Website - Height Always 100%

I have a responsive site and am trying to setup the background image so that the height is always 100%. The width doesn't matter so much, but there is elements at the bottom of the picture that always need to show. I can't quite get my coding right though:

CSS:

body.cms-home .main-container {
    margin-top: 20px;
    background-image: url("../images/landing.jpg");
    background-repeat: no-repeat;
    height: 100%;
    background-position: center;
    width: auto;

HTML: 

 <div class="main-container">
            </div>

My website is through Magneto, but I don't think that should make any different to the CSS.

What am I missing?

UPDATE: Just to confirm as it seems everyone is confused. I want my background image to always be 100% (no shorter). So if the browser is made shorter the image scales down to ensure that the full height of the image is always shown. So I guess the image size is dominated by the height of the browser.

Upvotes: 0

Views: 1700

Answers (3)

Fizzix
Fizzix

Reputation: 24375

You could use the vh sizing element. It stands for viewport height, and it's supported in most modern browsers. Apply it to your .main-container element so that it is always given a full height and width of the browsers window.

body.cms-home .main-container {
    background-image: url("../images/landing.jpg");
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center;
}

Note that you may also want to give it a position: fixed if your page is scrollable.

Working Demo

Upvotes: 0

Fred
Fred

Reputation: 21

Try using: background-size: cover;

Upvotes: 1

Jose Cerejo
Jose Cerejo

Reputation: 231

body.cms-home .main-container {
    margin-top: 20px;
    background-image: url("../images/landing.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

Upvotes: 2

Related Questions