CODEWITHSUNDEEP
htmlcss
Anne
Anne

Reputation: 11

header image doesn't show when the position is relative

I want to make a header with background image and it cover the page. So here's my code.

.header {
        background: url('img/bg-01.png') center center;
        position: relative;
        min-height: 100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
<header class="header" id="top">

</header>
<div class="container text-center">
    <h3>Lorem Ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

I'm using bootstrap css anyway. But, the header didn't show and when I change the position to absolute, the header appeared. But the content after the header doesn't show at all. How to solve it?

Upvotes: 0

Views: 58

Answers (3)

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

give height to header because div is empty only with background, so you have to add content or add height to div

Upvotes: 0

ProEvilz
ProEvilz

Reputation: 5445

The reason you can't see the header is because you've used a percentaged based height. Try adding a height in pixels like so 

.header {
        background: url('http://placehold.it/400x400') center center;
        position: relative;
        min-height: 200px;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

If you wish to use a percentage based height then you'll need to make sure that the parent's height is also set. In this case, it would be the body and html. And there is no need for position: relative if you added this in an attempt to make it work for you. 

html, body {
  height:100%;
}
.header {
        background: url('http://placehold.it/500x500') center center;
        position: relative;
        min-height: 100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
<header class="header" id="top">

</header>
<div class="container text-center">
    <h3>Lorem Ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Upvotes: 1

Gerard
Gerard

Reputation: 15796

You can set the min-height to 100vh.

header {
        background: url('http://placehold.it/500') center center;
        position: relative;
        min-height: 100vh;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
<header class="header" id="top">

</header>
<div class="container text-center">
    <h3>Lorem Ipsum</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Upvotes: 0

Related Questions