Установите background to div tag, materialize.css

Question

Использование materialize.css (http://materializecss.com), необходимо установить изображение в качестве фона формы ввода, чтобы изображение изменялось при изменении размера окна. Теперь это выглядит так: когда размер окна в окне браузера выглядит примерно так: и когда окно браузера максимизируется, он выглядит дерьмо: Надеюсь, у вас появится идея, извините за мой английский. Мне нужен правильный html-код для этой формы. Спасибо заранее.

UPDATE: Мой HTML-код:

<div class="container"> 

    <div class="row col s12"> 
     <div class="row col s8 offset-s2 white z-depth-3"> 

      <div style='float: left; width: 100%; overflow: hidden; background: url("../static/assets/images/envelope.png") center center no-repeat;' class="col s12"> 

       <div class="row"> 
        <h5 class="center">Адрес для получения посылки:</h5> 
       </div> 
       <div class="row"> 
        <div class="input-field col s5 offset-s1"> 
         <input id="firstName" type="text" class="validate"/> 
         <label for="firstName">Имя</label> 
        </div> 
        <div class="input-field col s5"> 
         <input id="lastName" type="text" class="validate"/> 
         <label for="lastName">Фамилия</label> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="input-field col s5 offset-s1"> 
         <input id="country" type="text" class="validate"/> 
         <label for="country">Страна</label> 
        </div> 
        <div class="input-field col s5"> 
         <input id="zipCode" type="text" class="validate"/> 
         <label for="zipCode">Индекс</label> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="input-field col s5 offset-s1"> 
         <input id="city" type="text" class="validate"/> 
         <label for="city">Город</label> 
        </div> 
        <div class="input-field col s5"> 
         <input id="street" type="text" class="validate"/> 
         <label for="street">Улица</label> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="input-field col s2 offset-s1"> 
         <input id="house" type="text" class="validate"/> 
         <label for="house">Дом</label> 
        </div> 
        <div class="input-field col s2"> 
         <input id="room" type="text" class="validate"/> 
         <label for="room">Квартира</label> 
        </div> 
       </div> 
       <div class="row center"> 
        <a class="waves-effect waves-light btn"><i class="material-icons right">send</i>Сохранить</a> 
        <br/> 
       </div> 

      </div> 
     </div> 
    </div> 
</div> 

Answer 1

мин-ширина в CSS для вашего изображения?

<div style='min-width: XXXpx; float: left; width: 100%; overflow: hidden; background: url("../static/assets/images/envelope.png") center center no-repeat;' class="col s12"> 

где XXX - это ширина вашего контента + около 30 пикселей для границы изображения.