Как сделать резиновый фон ?

@verstalshik · Регистрация: 13.02.2013

Author24 — интернет-сервис помощи студентам

добрый день! как сделать резиновый фон, он у меня не растягивается, вместе с контентом

http://cyberverstka.hol.es/block.html

@Mikhail Shell · 12.02.2015, 18:12

verstalshik, скорее всего это не фон не растягивается, а текст в блок не влезает. К блоку не прописывайте высоту вовсе.

@verstalshik · 12.02.2015, 18:18 **[ТС]**

без высоты фон исчезает

@paskalnikita · 12.02.2015, 18:32

При видите пример кода

@Mikhail Shell · 12.02.2015, 18:34

verstalshik, можете подогнать высоту на глаз (хотя это не лучшая идея).

@verstalshik · 12.02.2015, 18:37 **[ТС]**

CSS

ul{
     list-style: none;
   }
   .new-compani{
 width: 1100px;
}
.new-compani > p{
  font:600 30px 'Open Sans', sans-serif;
  color:#000;
  padding-top:30px;
  text-align:center; 
}
.new-compani p span{
 color: #3C9CC4;
}
ul.service{
 margin-top: 30px;
}
ul.service li{
 width: 20%;
 min-height: 370px;
 margin: 0 50px 150px 0;
}
ul.service li span{
 display: block;
 font: 400 16px 'Open Sans', sans-serif;
 color: #8f8f8f;
 text-align: center;
 padding: 0 0 10px 0;
}
ul.service li .block{
 background-color: #f3f3f3;
 margin: -4px 0 0 0;
 position: relative;
 min-height: 145px;
}
ul.service li .pelmeni {
 width: 90%;
 padding:  0 0 0 9px;
 position: absolute;
}
ul.service li .pelmeni a{
 display: block;
 color: #2d2d2d;
 padding: 8px 0 6px 0;
 text-align:center; 
}
ul.service li .pelmeni p{
  font: 15px 'Open Sans', sans-serif;
  color: #585757;
}
ul.service li .location{
 background: url(images/geo.png)  no-repeat 20px 20px;
 padding:  20px 0 0 0;
}
ul.service li .location span{
 font-size: 14px;
}
ul.service li .footer{
 display: block;
 background-color: #54b1be;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
 color: #fff;
}
ul.service li .swarowski {
 width: 100%;
 padding:  0 0 0 1px;
}
ul.service li .swarowski a{
 color: #2d2d2d;
 padding: 9px 0 6px 6px;
 text-align:left; 
}
ul.service li .swarowski p{
  font: 15px 'Open Sans', sans-serif;
  padding:0 0px 0 6px;
  color:#585757; }
ul.service li .tailand {
 width: 98%;
 padding:  0 0 0 1px;
}
ul.service li .tailand a{
 display: block;
 color: #2d2d2d;
 padding: 9px 0 6px 6px;
 text-align:left; 
}
ul.service li .tailand p{
  font: 15px 'Open Sans', sans-serif;
  padding:0 0px 0 6px;
  color:#585757; }
ul.service li .cloud {
 width: 100%;
 padding:  0 0 0 1px;
}
ul.service li .cloud a{
 display: block;
 color: #2d2d2d;
 padding: 9px 0 6px 6px;
 text-align:left; 
}
ul.service li .cloud p{
  font: 15px 'Open Sans', sans-serif;
  padding:0 0px 0 6px;
  color:#585757; }

HTML5

<div class="new-compani">
     
     
       <ul class="service">
       
         <li> 
           <span>Сфера сервиса и услуг</span>
            <img src="pelmeni.jpg"  alt="">
            <div class="block">
               <div class="pelmeni">
                  <a href="#">Пельмень Мастер</a>
                  <p>Строительство сети кафе-пельменных в России и за рубежом.
                  троительство сети кафе-пельменных в России и за рубежом
                  троительство сети кафе-пельменных в России и за рубежом</p>
                  <div class="location">
                   <span>Москва, Россия</span>  
                  </div>
                  <span class="footer">Новое на массинвесте</span> 
               </div>
           </div> 
         </li>
         
          <li> 
           <span>Сфера сервиса и услуг</span>
            <img src="pelmeni.jpg"  alt="">
            <div class="block">
               <div class="pelmeni">
                  <a href="#">Пельмень Мастер</a>
                  <p>Строительство сети кафе-пельменных в России и за рубежом.
                  троительство сети кафе-пельменных в России и за рубежом
                  троительство сети кафе-пельменных в России и за рубежом</p>
                  <div class="location">
                   <span>Москва, Россия</span>  
                  </div>
                  <span class="footer">Новое на массинвесте</span> 
               </div>
           </div> 
         </li>
        
         
       
         
       </ul> <!--  end service -->
     
   </div> <!-- new-compani -->

@Shakalaka · 12.02.2015, 19:47

Что за мода пошла лепить везде position:absolute/relative ?? Зачем абсолютное позиционирование для простых вложенных друг в друга блоков?? А вообще <div class="pelmeni"> убирайposition:absolute и будет тебе счастье

@verstalshik · 12.02.2015, 19:58 **[ТС]**

спасибо, хотелось чтобы нижний блок не двигался, но тот который наполняется контентом перекрывал нижний, потому и применил position:absolute/relative

@verstalshik 5 / 5 / 3 Регистрация: 13.02.2013 Сообщений: 99
		1
	Как сделать резиновый фон ? 12.02.2015, 17:38. Показов 1649. Ответов 7 Метки нет (Все метки) добрый день! как сделать резиновый фон, он у меня не растягивается, вместе с контентом http://cyberverstka.hol.es/block.html Миниатюры 0

@Mikhail Shell 52 / 52 / 39 Регистрация: 15.11.2014 Сообщений: 696
	12.02.2015, 18:12	2
	verstalshik, скорее всего это не фон не растягивается, а текст в блок не влезает. К блоку не прописывайте высоту вовсе. 0

@verstalshik 5 / 5 / 3 Регистрация: 13.02.2013 Сообщений: 99
	12.02.2015, 18:18 [ТС]	3
	без высоты фон исчезает 0

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	12.02.2015, 18:32	4
	При видите пример кода 0

@Mikhail Shell 52 / 52 / 39 Регистрация: 15.11.2014 Сообщений: 696
	12.02.2015, 18:34	5
	verstalshik, можете подогнать высоту на глаз (хотя это не лучшая идея). 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	12.02.2015, 19:47	7
	Что за мода пошла лепить везде position:absolute/relative ?? Зачем абсолютное позиционирование для простых вложенных друг в друга блоков?? А вообще <div class="pelmeni"> убирайposition:absolute и будет тебе счастье 1

@verstalshik 5 / 5 / 3 Регистрация: 13.02.2013 Сообщений: 99
	12.02.2015, 19:58 [ТС]	8
	спасибо, хотелось чтобы нижний блок не двигался, но тот который наполняется контентом перекрывал нижний, потому и применил position:absolute/relative 0