I am struggling with some simple(!) code. I managed to have a horizontally stretched background that I aligned to the bottom of the page, but the content DIV that should come above it is hidden underneath the DIV with the background.

My CSS code is:

```
.background {
    width: 100%;
    height: 1630px;
    background: url(bkg.jpg) bottom center no-repeat;
    background-size: contain;
    position: fixed;
}
.postcard {
    width: 700px;
    margin: 100px auto;
    height: 465px;
    background-image:url(card.png); 
    border: 1px solid #ccc;
}

```

And the page code is:

```
<div class="background"></div>
<div class="postcard"></div>

```

I tried setting different z-index values, nothing helped. Do you have any idea what I'm doing wrong?