Перейти к содержимому



Repeat картинки фона по "y" в вертикальном сайт баре

#1

Поделиться сообщением #1



Kdes70

Kdes70
  • Неактивные
  • 55 сообщений
  • Репутация: 0
0

Отправлено 27 Февраль 2012 - 21:47

Здравствуйте! задумал в вертикальном сайт баре растиражировать картинку горизонтальную, но тиражируется она только в заданном размере. можно ли сделать так что бы она тиражировалось по высоте всего блока, просто высота может меняться
вот на рисунке видно если понадобится выложу стили.
Зарания благодарю за любую оказанную помощь

Прикрепленные изображения

  • Без-имени-1.jpg

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Фон
  2. Фон
  3. Зафиксировать изображение (резиновый фон)
  4. Html верстка на конкретном примере
  5. Эффект блокнота

#2

Поделиться сообщением #2



matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 27 Февраль 2012 - 22:25

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

Что-то делаете не так. Фоновое изображение по умолчанию занимает всю доступную область блока. Например:
<style type="text/css">
	.sidebar{
		width:200px;
		border:1px solid #ccc;
		background:url(bg.jpg);
	}
</style>
<div class="sidebar">
Здравствуйте! задумал в вертикальном сайт баре растиражировать картинку горизонтальную, но тиражируется она только в заданном размере. можно ли сделать так что бы она тиражировалось по высоте всего блока, просто высота может меняться
вот на рисунке видно если понадобится выложу стили.
Зарания благодарю за любую оказанную помощь
</div>
В качестве фонового изображения использована картинка 10*10 пикселей.
Результат:

Прикрепленные изображения

  • bg-repeat.jpg

  • 0


#3

Поделиться сообщением #3



Kdes70

Kdes70
    Topic Starter
  • Неактивные
  • 55 сообщений
  • Репутация: 0

Отправлено 27 Февраль 2012 - 22:36

попробовал задать блоку с картинкой высоту 100% вот что получилось
знакомые мне манипуляции с css не дали результатов помогите люди добрые ...

/*левый блок*/

#left{

width: 157px;
height: 100%;

float: left;
outline: 1px solid blue;


}

#title{
height: 40px;
background-image:url("../images/title1.png") ;
background-repeat: no-repeat;
outline: 0px solid red;


}


#nav {
height: 100%;
padding: 8px;
padding-bottom: 0px;
background-image:url("../images/leftfooter.png") ;
background-repeat: repeat-y;
outline: 1px solid red;
}

В качестве фонового изображения использована картинка 10*10 пикселей.


но у меня изображение двух цветное и я зделал полоску 10*150px

Прикрепленные изображения

  • Без-имени-1.jpg

  • 0

#4

Поделиться сообщением #4



matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 27 Февраль 2012 - 22:48

но у меня изображение двух цветное и я зделал полоску 10*150px

Да хоть трехцветное :blink:
Изображение по умолчанию репитится по всему блоку. Делаете в данном случае полоску шириной 150 и высотой пару пикселей - и картинка будет повторяться до самого низа блока.
<style type="text/css">
	.sidebar{
		width:150px;
		background:url(bg.jpg);
	}
	.sidebar p{
		padding:10px;
	}
</style>
<div class="sidebar">
<p>Здравствуйте! задумал в вертикальном сайт баре растиражировать картинку горизонтальную, но тиражируется она только в заданном размере. можно ли сделать так что бы она тиражировалось по высоте всего блока, просто высота может меняться
вот на рисунке видно если понадобится выложу стили.
Зарания благодарю за любую оказанную помощь</p>
</div>
Результат:

Прикрепленные изображения

  • bg_repeat2.jpg

  • 0


#5

Поделиться сообщением #5



Kdes70

Kdes70
    Topic Starter
  • Неактивные
  • 55 сообщений
  • Репутация: 0

Отправлено 27 Февраль 2012 - 23:16

Но мне нужно чтобы он репился не от содержимого

.sidebar{
width:150px;
background:url(bg.jpg);
от этого он прижемается к навигации, мне нужно что бы он просто репился до футера

Прикрепленные изображения

  • Без-имени-2.jpg

  • 0

#6

Поделиться сообщением #6



yury

yury
  • Пользователь
  • 632 сообщений
  • Репутация: 181

Отправлено 27 Февраль 2012 - 23:21

Здравствуйте! задумал в вертикальном сайт баре растиражировать картинку горизонтальную, но тиражируется она только в заданном размере. можно ли сделать так что бы она тиражировалось по высоте всего блока, просто высота может меняться

Kdes70,
содержимое не пробовали в блок положить? Попробуйте и все у вас "растиражируется".
Или высоту задайте явно, какую вам надо (не в процентах, а в пикселях).
А вообще, судя по вашей задаче, вам полезно будет почитать вот эту статью Колонки одинаковой высоты
  • 0

#7

Поделиться сообщением #7



matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 27 Февраль 2012 - 23:22

можно ли сделать так что бы она тиражировалось по высоте всего блока, просто высота может меняться

Но мне нужно чтобы он репился не от содержимого

Так что именно нужно? Еще раз повторюсь - фоновое изображение заполняет весь блок. Нужно, чтобы заполнило весь блок? Укажи высоту блока. Определись, что нужно и четко сформулируй вопрос - здесь мысли не читают.
  • 0


#8

Поделиться сообщением #8



Kdes70

Kdes70
    Topic Starter
  • Неактивные
  • 55 сообщений
  • Репутация: 0

Отправлено 27 Февраль 2012 - 23:31

Без-имени-2.jpg надо чтобы фон в сайт баре растягивался в месте с контентом
  • 0

#9

Поделиться сообщением #9



matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 27 Февраль 2012 - 23:40

Наконец-то...
И опять-таки вопрос сформулирован неверно. Надо чтобы тянулся не фон, а блоки. При этом все блоки должны иметь одинаковую высоту. Улавливаешь разницу? Если будут тянуться блоки, то с ними растянется и фон. А фон и так тянется по всей высоте блока... задай границы блоку, чтобы убедиться в этом.
Для того, чтобы получить решение, достаточно загуглить фразу "блоки одинаковой высоты". Первый же результат предлагает сразу 4 варианта решения.
  • 0


robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru