Problem with header size

Question

I’m suffering from a code where I need to leave a particular banner with a predetermined size in the browser when opening the page, but every time I open the page, it gets the full size of the browser. I don’t know exactly how to determine this parameter in CSS (or HTML) and from where to do it.

Below, follows a model of what I want to do.
1 - Image with adjusted banner:

2 - Image with full screen (what I do not want)

Is there some kind of div with the predetermined size?
Can someone help me? Follow my CSS code:

header {
    position: relative;
}
header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url(../img/slider-overlay.png) repeat;
}
header .carousel,
header .item,
header .active {
    height: 100%; /* Aqui se eu colocar 1024px, o css nao assume o tamanho determinado */
}
.carousel-inner {
    min-height: 500px;
    height: 100%;
}