repeat-y, заданный промежуток высоты

Morrag · August 22, 2011

Всем привет. Проблема вот в чем:

Существует 2 блока. В одном бэкграунд высотой 128pх со свойством repeat-y, картинка сама представляет собой текстуру из шахматных квадратов (например), а второй блок - это что-то вроде футера, который имеет замыкающую текстуру. И при растягивании блока над футером - само собой тектура не повторяется каждые 128px, а повторяется в зависимости от размера наполнения блока. Соответственно вопрос: Возможно ли свойству repeat-y задать фиксированный "шаг" с которым оно будет повторять изображение?

Я представляю, что высоту блока нужно запрограммировать через JS, чтобы она всегда была кратна высоте изображения, т.е. если у меня изображение 128px, то блок должен быть 128, 258 или 384 пикселей в высоту... но как это сделать?

Заранее спасибо

Shigamotto · August 22, 2011

Вообще логично подумать если у обоих блоков задать одинаковый шаг, в данном случае высоту... то рисунок будет попадать в такт... другой вопрос на сколько изначально его сдвинуть...

лично мое предложение в обоих блоках сделать фон одинаковой размерности... и все... дальше с помощью css переменной background-position смож сдвигать один отнасительно другого...

Morrag · August 22, 2011

Немного не понял

Для наглядности на этом сайте, который я делал - такая же проблема. Если приглядеться, то между основным телом и футером (левая и правые колонки) есть дефект. Несовпадение рисунка. Сам сайт http://angels-pw.com/. Опять же - тело сайта растягивается по контенту, а не на заданную величину.

Edited August 22, 2011 by Morrag

Morrag · August 23, 2011

Нашел ответ на свой вопро. Может кому пригодиться:


<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Hello!</title>
  <style type="text/css">
  #content{
    background-image: url(bg.gif);
    border: 1px solid #99CCCC;
    width: 72px;
    min-height: 24px;
  }

  </style>
  <script language="JavaScript" type="text/javascript">
  function change_height(){
    var cont = document.getElementById('content');
    cont.style.height = Math.ceil(cont.clientHeight / 24) * 24 + 'px';

  }
  </script>
</head>

<body onload="change_height()">

<div id="content">Some content</div>

</body>

</html>

Sign In

repeat-y, заданный промежуток высоты

Question

Morrag

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Shigamotto

Link to comment

Share on other sites

Morrag

Link to comment

Share on other sites

Morrag

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information