CODEWITHSUNDEEP
htmlcss
Tabris
Tabris

Reputation: 57

Positioning an image within a header

I would like to position the image inside the header. Currently, the top portion of the image is displayed and I want to display the middle part of the image. The top attribute makes the image clip over the parent's box. Please take a look at my code.

HTML:

<body>
    <header class="header">
        <div class="header-inner">

        </div>
    </header>
</body>

CSS:

.header {
    position: relative;
    width: 100%;
    height: 20%;
    background-color: grey;
}

.header-inner {
    position: absolute;
    background-image: url(../images/img.jpg);
    width: 100%;
    height: 100%;
}

Upvotes: 0

Views: 1325

Answers (2)

r1ddler
r1ddler

Reputation: 178

If you set position: absolute then block will be over the others. So just set z-index: -1; to .header-inner

Upvotes: 0

theDavidBarton
theDavidBarton

Reputation: 8841

If you want to display the middle part of the image you could use background-position on .header-inner. You can specify a custom percentage or simply center it.

background-position: center;

Upvotes: 1

Related Questions