Problem with header size

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

Below is a template of what I want to do. 1 - Image with the banner set:

2-Fullscreenimage(whichIdonotwant)

Is there any kind of div with the pre-determined size? Someone can help me? Here is 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%;
}