How to make sure the background image is fully displayed and covers the full size

advertisements

I have a header div, which I want to be fully covered with a background image. I want the image to be fully shown, so nothing is cropped. However, it seems to be stretching the image and cropping it.

css:

..header{

        border-top-left-radius:5px;
        border-top-right-radius: 5px;
        max-width: 600px;
        width:100%;
        height: auto;
        min-height: 200px;
        background: url("img/bg-abstract.jpg") no-repeat fixed;
        background-position: left top;
        background-size: 100%;
        position: relative;
        background-attachment: fixed;
        background-repeat: no-repeat;

    }


What you need is

background-size:cover