html - Fill whole div with an image regardless of image size not working -

i'm trying fill whole div image, regardless of size of image, reason image big it's default size. not automatically stretch fit size of div. tried setting width , height of image 100%, thinking it'll fit div way, image still stayed in default size. there way automatically stretch image fill div, without testing , changing each image hand?

<style>  div {     border: 1px solid red;     width: 1000px;     height: 1000px;     background-image: url("side.jpg");     background-repeat: no-repeat; }  img {     width: 100%;     height: 100%; }  </style>  <div> </div> 

from question, unclear whether trying use background image or img element fill div.

if want fill div using img element, code you've posted you. need place img element within div, such as:

<div><img src="http://placehold.it/250x250" /></div> 

if want stretch image fill div using background image, need add value cover background-size property:

background-size:cover; 

jsfiddle img element

jsfiddle background image