CODEWITHSUNDEEP
htmlcss
Newbie
Newbie

Reputation: 1714

div how to fill parent in css

I have a div for setting background, but my output shows that div is not fill parent, it still has little white space at top:
enter image description here

Below is my code:
HTML:

<body>
<div class="bg-image"></div>
    <div class="center">
        <div class="wrap">
            <label>Welcome</label>
        </div>
    </div>
</body>


CSS:

.bg-image { 
    position: absolute;
    left: 0;
    right: 0;
    background-image: url(../images/background_blurred.jpg); 
    width: 100%;
    height: 100%;
}
.center {
    text-align: center;
    z-index: 2;
}
.wrap {
    position: absolute;
    width: auto;
    display: inline-block;
    border: 3px solid #8AC007;
    padding: 10px;
    z-index: 2;
}

Upvotes: 0

Views: 187

Answers (2)

Taylor&#39;s Designs
Taylor&#39;s Designs

Reputation: 57

try stripping the margin and padding. I use:

    *{margin:0;
      padding:0;
    }

this will reset the margins and padding on all elements. Meaning you will need to set your own for paragraphs and headers, etc.

Optionally, you could strip the margins and padding of just the html and body tag.

 html, body
 {margin:0;
 padding:0;
 }

Upvotes: 0

gopalraju
gopalraju

Reputation: 2309

Try this:

html,body{
 margin:0;
 padding:0;
}

.bg-image { 
 position: absolute;
 left: 0;
 right: 0;
 top:0;
 bottom:0;
 background-image: url(../images/background_blurred.jpg);   
}

Upvotes: 1

Related Questions