.wrapper {
    width: 100%;
    /* whatever width you want  #337ab7; */
    display: inline-block;
    position: relative;
    background-size: contain;
    background: url('../Images/page-anasayfa.png') top center repeat #428bca; /*lightgrey;*/ /*#eeeeff;*/ /*#337ab7;*/
    margin: 0 auto;
}

    .wrapper:after {
        padding-top: 76.3%;
        /* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
        display: block;
        content: '';
    }

.main {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    color: black;
    text-align: left;
    margin-top: 30%;
    margin-left: 15%;
    background-color: black; /*#337ab7;*/
    opacity: 0.6;
    color: white;
    width: 70%;
    height: 175px;
    padding: 5px 20px 5px 20px;
    font-size: 30px;
}