CODEWITHSUNDEEP
htmlcssbackgroundliquid-layout
YuriyL
YuriyL

Reputation: 3

Liquid backgrounds in css

I have a page with two lines background. One line is yellow and has a height: 65%, another line is gray and has a height:35% And I have an absolutely positioned div in center with fixed width and height. The gray lines is right under my div. The problem is, when I change the size of my page, or zoom out(to simulate big size screen) my div appears above gray background. If I set height of each background line to 50%, everything is good, but I need 65% and 35%. Here's jsfiddle link: http://jsfiddle.net/J2LTR/ Try to zoom out on a page and the black square will go above the gray background. Any ideas how to fix this?

Here's my code: 

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    min-height: 100%
}
    .yellow {
    width: 100%;
    height: 65%;
    background: #e5bd00;
    background-repeat: repeat;
    }
    .gray {
    width: 100%;
    height: 35%;
    background: #d2d2d2;
    background-repeat: repeat;
    }
    .wrap {
    min-width: 300px;
    width: 100%;
    height: 100%;
    min-height: 600px;
    margin: 0 auto;
    position: relative; 
    }
    .center_box {
    background: #000;   
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -120px;
    margin-left: -200px;
    width: 400px;
    height: 235px;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="yellow"></div>
        <div class="gray"></div>
        <div class="center_box">some content</div>
    </div>
</body>
</html>

Upvotes: 0

Views: 899

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105903

your value for top and margin-top are not correct, cause it is based on center and your boarder is down 65%. try this instead:

.center_box {
    background: #000;   
    position: absolute;
    top: 65%;/* the tune you need to start with */
    left: 50%;
    margin-top: -235px;
    margin-left: -200px;
    width: 400px;
    height: 235px;
    }

http://jsfiddle.net/J2LTR/1/

You could even use a linear-gradient on body if you want to include only young browsers : http://codepen.io/anon/pen/EImiz

Upvotes: 1

Related Questions