Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Фоновое изображение, padding и масштабирование. (https://javascript.ru/forum/xhtml-html-css/23460-fonovoe-izobrazhenie-padding-i-masshtabirovanie.html)

velther 24.11.2011 13:24
Фоновое изображение, padding и масштабирование.
 
Господа, пока никак не удается найти решение моей проблемы в интернете, посему обращусь к вам.
Есть приблизительно такой код:

Код:
<div class="block">
  <div>
    <div>
    </div>
  </div>
</div>



.block
{
  background: url(image.png) 0 0 no-repeat;
  padding: 0 0 0 5px;
}
.block > div
{
  background: url(image2.png) 100% 0 no-repeat;
  padding: 0 5px 0 0;
}
.block > div > div
{
  background: url(bg.png) 100% 0 repeat-x;
}

При масштабировании страницы фоновое изображение и отсуп, по-видимому, масштабируются не совсем одинаково и возникают незаполненные фоновым рисунком места. Что посоветуете делать в такой ситуации? Может быть подобную задачу можно решить другими методами?

ksa 24.11.2011 13:30
Как тут не вспомнить М.Задорнова... :)

Цитата:
В американской школе...
- Дети. Решите задачу. На завод пришло 30 больших колёс и 50 маленьких... Сколько 3-хколёсных велосипедов может выпустить завод?
(руку тянет русский мальчик)
- Да, Ваня...
- Одних колёс для изготовления велосипедов недостаточно...

velther 24.11.2011 13:37
Вот уж никак не думал, регистрируясь, на javascript.ru, что окажусь в аншлаге.
Каких же подробностей не хватает Вам, любезнейший?

ksa 24.11.2011 13:39
Цитата:
Сообщение от velther
Каких же подробностей не хватает Вам, любезнейший?
Мне-то всего хватает. :D Проблема-то у тебя...

Brahma 24.11.2011 16:13
no-repeat просит меня задать вопрос
а какой размер div-ов?
картинки так же в студию! )

поясню. no-repeat подставляет картинку без повторений, а у вас размер картинки может отличается от размера блока. в таком случае её надо «тянуть», но тут уже просто html+css не обойтись

Seva1986 24.11.2011 17:46
ослы ниже 9 нужны?

velther 24.11.2011 21:04
Повторюсь, что проблема возникает только при масштабировании.

Brahma,
подобных блоков на странице много, всем div.block присвоена различная ширина через инлайн стили, картинка справа и слева представляет собой "оборваный" край блока, она не должна повторяться

Seva1986,
Решение нужно в основном только для сафари под iOs на iPad.
Предлагаете использовать background-size: 100%?

P.S. Я так понимаю, что для нормально масштабируемых сайтов, нужно использовать векторную графику и указывать все размеры в em

Seva1986 24.11.2011 22:36
Цитата:
Сообщение от velther
Предлагаете использовать background-size: 100%?
ну да в общем хотел именно это предложить.....

Seva1986 24.11.2011 22:43
Цитата:
Сообщение от velther
Решение нужно в основном только для сафари под iOs на iPad.
Верстал я както под эту жопу этот сафари от виндового отличаеся, причём как мне показалось в худшую сторону....

velther 25.11.2011 00:51
Да, очень многое из CSS3 не поддерживается, до 5 версии не поддерживался position: fixed.


Часовой пояс GMT +3, время: 18:34.