Jump to content
  • 0

Резиновый контент...


shOotzy
 Share

Question

Как сделать контент (картинка фоном) чтобы он растягивался текстом ? перерыл весь инет , ничего не нашёл...

CSS:

#content {
background: url(images/shablon222_07.jpg) no-repeat;
position:absolute;
top:814px;
left:255px;
width: 519px;
height: 440px;
}

HTML:

<div id="content">
<center>{content}</center></div>

Edited by shOotzy
Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

Не совсем понятно, что вы хотите растягивать... Фоновую картинку? Её никак не растянуть, только умножать можно. А если вы хотите растягивать картинку, то её надо делать не фоновой, а расположить под текстом, естественно, с абсолютным позиционированием относительно блока content и задать высоту и ширину в 100%.

А блок content будет растягиваться, если вы не будете задавать ему размеров.

Edited by Searcher
Link to comment
Share on other sites

  • 0
Как сделать контент (картинка фоном) чтобы он растягивался текстом ? перерыл весь инет , ничего не нашёл...

CSS:

#content {
background: url(images/shablon222_07.jpg) no-repeat;
position:absolute;
top:814px;
left:255px;
width: 519px;
height: 440px;
}

HTML:

<div id="content">
<center>{content}</center></div>

Не совсем понятно, что вы хотите растягивать... Фоновую картинку? Её никак не растянуть, только умножать можно. А если вы хотите растягивать картинку, то её надо делать не фоновой, а расположить под текстом, естественно, с абсолютным позиционированием относительно блока content и задать высоту и ширину в 100%.

А блок content будет растягиваться, если вы не будете задавать ему размеров.

А про умножение поподробней узнать можно?

P.S repeat-y не катит =\

Edited by shOotzy
Link to comment
Share on other sites

  • 0
А про умножение поподробней узнать можно?

P.S repeat-y не катит =\

Вероятно как раз повторение и имелось в виду. По моему, действительно, фон не может растягиваться, а только повторяться.

Хотя м.б. и существуют какие-нибудь сверххитрые приёмы.

Link to comment
Share on other sites

  • 0

Сделал вёрстку по float: ... повторение фона так и нету... =\

CSS:

/* Контент */

#content {
background: url(images/image__14.jpg) repeat-y;
width: 539px;
height: 420px;
float: left;
}

/* Конец Контент */

HTML:

											 <!-- Контент --!>

<div id="content">{content}</div>

<!-- Конец Контент --!>

Может быть я что-то неправильно делаю?...

Link to comment
Share on other sites

  • 0

float не имеет отношения к повторению фона. repeat-y это повторение только по вертикали. Какого размера у вас image__14.jpg? Если картинка больше указанной вами высоты, вы и не увидите повторения. А если вы хотите, чтобы блок растягивался в высоту, то не надо её указывать.

#content {
background: url(images/image__14.jpg) repeat-y;
width: 539px;
float: left;
}

Edited by Searcher
Link to comment
Share on other sites

  • 0
float не имеет отношения к повторению фона. repeat-y это повторение только по вертикали. Какого размера у вас image__14.jpg? Если картинка больше указанной вами высоты, вы и не увидите повторения. А если вы хотите, чтобы блок растягивался в высоту, то не надо её указывать.

#content {
background: url(images/image__14.jpg) repeat-y;
width: 539px;
float: left;
}

Если не указывать высоту , и если нет текста на контекте (тоесть пусто) , то все нижние блоки расползаются...

Link to comment
Share on other sites

  • 0

если вообще не ставить repeat, то фон сам будет повторяться во все стороны, если есть куда повторять.

По идее блок должен растягиваться даже с фикс. высотой, только в разных браузерах по разному:lol:

Link to comment
Share on other sites

  • 0
если вообще не ставить repeat, то фон сам будет повторяться во все стороны, если есть куда повторять.

По идее блок должен растягиваться даже с фикс. высотой, только в разных браузерах по разному:lol:

Да, вариант решения этой проблемы

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy