html - Prevent div from stretching its background-image -

i have div background-image defined follows in stylesheet:

.information_photo {    position: relative;    top: 30px;    width: 100%;    height: 200px;    background-image: url('http://www.ladyblitz.it/wp-content/uploads/2015/04/carbonara.jpg');    background-repeat: no-repeat;    background-position: center center;    background-size: 100% 100%;  }

<div class="information_photo"></div>

as can see stretches original image, instead want focus on part of background-image without stretching or resizing it.

the 100% 100% background-size value means background should stretch (100%) of width of element , (100%) of height of element. have either of them set auto, size undefined dimension automatically, while preserving images aspect ratio.

you can choose portion of image visible adjusting respective background-position style.

.information_photo {    position: relative;    top: 30px;    width: 100%;    height: 200px;    background-image: url('http://www.ladyblitz.it/wp-content/uploads/2015/04/carbonara.jpg');    background-repeat: no-repeat;    background-position: center -30px; /* visible 30 px top */      /* 100% height, auto width */    background-size: auto 100%;      /* 100% width, auto height */    background-size: 100% auto;    /* or */    background-size: 100%;  }

<div class="information_photo"></div>