Как сверстать блок с повторяющейся текстурой?

Question

[Александр Вульф]

Здравствуйте! Мне необходимо сверстать блок с некоторым фоном (есть только изображение всего блока).

spoiler

Проблема заключается в том, что при увеличении блока текстура заканчивается (это и логично). Использовать повторяющийся фон не вариант, ибо углы у этого блока прозрачные. Пытался химичить с after/before, ничего адекватного получил.

spoiler

Помогите сверстать этот блок.

Текущая верстка.

Comments

[Юрий Лобанов]

@mannaro знающим людям видимо не очень хочется возиться с такой задачей. После Ваших инсинуаций мне тоже. И все же, уточните детали: в каком направлении Вы увеличиваете контент - в горизонтальном, вертикальном или в том и другом. Справедливо также попросить у Вас изображение, как оно должно выглядеть при увеличенном контенте.

[Александр Вульф]

@iiil извиняюсь, что так написал:) Просто у меня уже отчаяние..
Контент увеличивается как по горизонтали, так и по вертикали. Изображение приложить не могу, ибо в дизайне этого не было (там везде очень мало контента).
Всем огромное спасибо, но пока все не подходит (менять HTML нельзя, только один блок с классом block).
Если никто не сможет помочь, то просто пошлю заказчика к дизайнеру.

[Александр Вульф]

Спасибо всем, кто оказал мне помощь! :)

Answer 1

[dllstar]

знатный ты троль. я чуть было не сдался.
jsfiddle.net/5ca4x
надеюсь теперь не появится новых уточнений)

Comments

[Юрий Лобанов]

А что поменялось? jsfiddle.net/iiil/5ca4x/3

[dllstar]

в смысле?
в отличии от предложенного мной выше jsfiddle.net/2HJVf
тут отсутствует изменения первоначальной html верстки.
верстка не тронута,только css. при увеличении блока отсутствуют пробелы, текстура продолжается, углы прозрачные, что не так?)

[Юрий Лобанов]

@dllstar поменялось, но решение все равно не полное. Я Вам ссылку дал, при уменьшении контента верстка опять едет. Считаю, что задачу надо решать с дизайнером.

[Александр Вульф]

@dllstar решение было гениальным.. Но вот, как заметил @iiil, при уменьшении контента верстка едет.. А я ведь почти поверил)))

[Александр Вульф]

@dllstar хотя) У меня все блоки удовлетворяют тем размерам, при котором верстка не плывет. @iiil А вот заказчик не понимает, почему в дизайне нарисовано и работает, а на сайте такого сделать не получается. Так что придется оставлять так, как предложил @dllstar. На данный момент это самое крутое решение. Спасибо всем, кто оказал мне помощь! :)

Answer 2

[Борис Пеньковский]

jsfiddle.net/5AGJy

Comments

[Александр Вульф]

Спасибо, но правый верхний угол у меня отображается как-то странно habrastorage.org/storage3/ebb/4b2/870/ebb4b2870bd2...

Answer 3

[thror )))]

jsfiddle.net/m1shA/TxtwS

Comments

[Борис Пеньковский]

А если контент не фиксированный? зачем ты размер то прописал в пикселях? что за магические цифры?

[Александр Вульф]

@m1shaW спасибо, но, как заметил @Able1991, размер действительно установить не вариант:)

[Михей Егоров]

Но ведь ширину нужно задать!

Answer 4

[Сергей Ларионов]

Посмотрите как тут сделано: meganom.info. На главной, посередине плашка с 3 картинками.

Comments

[Александр Вульф]

Спасибо, но растягивать текстуру не вариант :(

Answer 5

[trall]

jsfiddle.net/vvS68/7

Comments

[Александр Вульф]

Растягивать тоже не вариант, смотрится ужасно :(
Тут надо думать в сторону вставки еще одной картинки или дополнения CSS стилями (after/before).

Answer 6

[dllstar]

o_O
jsfiddle.net/2HJVf

Comments

[Александр Вульф]

Это тоже круто, то менять HTML верстку было бы очень накладно..

Answer 7

[trall]

Посмотрите, еще вариант: jsfiddle.net/59v7y/1

// только надо подправить под себя и все

Comments

[Александр Вульф]

ахах, жесть какая:) Этот способ хорош, но не подходит потому что у меня .block используется в 100500 местах и нужно изменить только CSS, чтобы все стало хорошо:)

Answer 8

[Юрий Лобанов]

@mannaro, нельзя менять html?
Я допускаю, что могу ошибиться, но почти со 100% уверенностью могу сказать - так не выйдет.
Либо меняем html, либо картинку фона, либо подбираем контент, чтобы не превышал размеры. При общении с заказчиком можете приложить ответы сообщества.