Вывод более одного изображения посредствои css

[rafaello9]

Прочитал в учебнике css, что через background или background-image можно вывести более одного изображения. Никак не могу применить этот момент на практике.

Дело в том, что мне необходимо оформить боковую вертикальную колонку, вынесенную отдельным блоком через <div></div>. Причем, нельзя использовать вставку картинок посредством html (это связано с некоректным отображением сайта в мобильных устройствах).

В самом верху надо вывести одну угловую картинку, а потом, под ней или как, вторую. Причем вторая картинка - это квадратик, который повторяется по вертикали. Тем самым, при растягивании основного макета, боковая колонка вытягивается соответственно.

Каким образом можно, использую только css вывести в верхнем углу одну картинку, а второй залить пространство до низу?

И второй вопрос. Почему, если выводить картинку в виде фона, как backround, то качество ее понижается по сравнению с тем, если ее вывести просто через html. И как можно исправить это?

[sigma77]

Каким образом можно, использую только css вывести в верхнем углу одну картинку, а второй залить пространство до низу?

Так?

http://jsfiddle.net/fainz777/Xsu5p/

И второй вопрос. Почему, если выводить картинку в виде фона, как backround, то качество ее понижается по сравнению с тем, если ее вывести просто через html. И как можно исправить это?

В img выносятся картинки относящиеся к контенту и несущие смысл. Все остальные, касающиеся фона задаются в CSS через свойство background

И что значит понижается качество? Хотелось бы увидеть пример.

[USF]

Прочитал в учебнике css, что через background или background-image можно вывести более одного изображения.

css3 позволяет

[rafaello9]

http://jsfiddle.net/fainz777/Xsu5p/

Здорово! То что надо, а то голову поломал. Спасибо!

А в приведенном примере, за счет чего картинка земного шара поверх другой, которая повторяется?

[USF]

за счет последовательности. 1й вверху

Edited October 6, 2012 by USF

[rafaello9]

Вопрос решил.

Большое всем спасибо за помощь!

[keltanas]

Так?

http://jsfiddle.net/fainz777/Xsu5p/

А что будет, если код в IE<9 открыть?

[sigma77]

А что будет, если код в IE<9 открыть?

Так открой и посмотри.

[keltanas]

А что будет, если код в IE<9 открыть?

Так открой и посмотри.

Так открыл и посмотрел - XY*

[sigma77]

Так открыл и посмотрел - XY*

XY-хромосомы?

Если нет, то напомню, что мат. в т.ч. завуалированный на форуме запрещен.

Это первое.

Второе. Чудес не бывает. Если хочешь, чтобы работало в ИЕ8 и ниже - используй обертки. либо оставляй для него какой-либо один фон.

[keltanas]

Чудес не бывает. Если хочешь, чтобы работало в ИЕ8 и ниже - используй обертки. либо оставляй для него какой-либо один фон.

Так я-то это знаю. А вот товарища rafaello9 твой ответ ввел в заблуждение. Которое раскроется, когда к нему на сайт зайдет посетитель через IE8 и увидит совсем не то, что задумано.

Конечно, когда делаешь приложения для интранета, об этом можно не задумываться. А если верстаешь сайт для широкой аудитории - такая верстка будет ошибкой.

[USF]

категорически не согласен.

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

[keltanas]

категорически не согласен.

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

Для кого лучше? Для проекта, который потеряет 20% клиентов?

Сайт - это в первую очередь - инструмент для бизнеса, а не хомячок директора компании. И чем быстрее разработчики это поймут, тем раньше они станут делать качественные продукты.

[USF]

Для проекта, который потеряет 20% клиентов?

корпоративный сайт и любой другой вебресурс это совершенно разные вещи.

инструмент для бизнеса

зачем делать говнокод под ie, если для определенных проектов доля посещений составляет меньше 5%?

хочешь посетить сайт - поставь нормальный браузер.

[keltanas]

зачем делать говнокод под ie, если для определенных проектов доля посещений составляет меньше 5%?

хочешь посетить сайт - поставь нормальный браузер.

Как разработчик, я с удовольствием бы с тобой согласился. Но, ставя себя на место своего клиента, не могу этого сделать.

По поводу 5% - это большая натяжка. Для IT ресурсов это может и так. Но, в различных сферах этот процент может быть в разы выше. А многим людям просто не хочется думать, что вообще такое браузер. Они нажимают кнопку "Интернет" и работают с вашим сайтом - это норма. Но, у них может быть много денег, с которыми они готовы расстаться ради качественного продукта.

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

[SelenIT]

Изящная деградация и всё такое... умным и современным — красивый мультифон, "старым, но не сдающимся" — спартанскую одноцветную заливку.

В принципе, конкретно для IE8 мультифон можно эмулировать через псевдоэлементы. Но большого смысла нет, т.к. Гугл вот-вот даст этому экс-браузеру "спартанского" же пинка:

[keltanas]

Изящная деградация и всё такое... умным и современным — красивый мультифон, "старым, но не сдающимся" — спартанскую одноцветную заливку.

В принципе, конкретно для IE8 мультифон можно эмулировать через псевдоэлементы. Но большого смысла нет, т.к. Гугл вот-вот даст этому экс-браузеру "спартанского" же пинка:

Напомню, что в нашей стране знают, что такое гугл, не более 30% пользователей интернета. Пользуются сервисами гугла того меньше.

Почему все всегда смотрят на то, что твориться на западе, но постоянно забывают про калчер референс? Кстати те, кто про него не забывают, а на него ориентируются, и добиваются заметно больших успехов.

[rafaello9]

Вчера этот вариант у меня не прошел по причине того, что размер статичной картинки по ширине больше, чем div-блок. Этот момент я не смог решить, а именно... Внутри одного css-правила, когда значению backround присваиваются две картинки, я не смог спозиционировать одну статичную картинку(ее ширина больше блока div)

Пришлось применить другой способ(подсказали на другом форуме)

Внутри div-блока я определил еще один div-блок, и во внутреннем блоке посредством margin вывел статичную картинку туда, куда надо.

Такой способ, поддерживают IE8. Проверил.

[SelenIT]

в нашей стране знают, что такое гугл, не более 30% пользователей интернета

Откуда такие пессимистичные цифры? К сервисам гугла, на минуточку, относится не только GMail, но и youTube, а есть еще набирающие популярность андроиды... Не говоря уже о том, что наиболее калчер-референсная статистика безвозвратно опустила IE8 ниже плинтуса 5%-ного порога значимости.

Внутри div-блока я определил еще один div-блок, и во внутреннем блоке посредством margin...

Такой способ и IE7 поддерживает

[keltanas]

Откуда такие пессимистичные цифры? К сервисам гугла, на минуточку, относится не только GMail, но и youTube, а есть еще набирающие популярность андроиды... Не говоря уже о том, что наиболее калчер-референсная статистика безвозвратно опустила IE8 ниже плинтуса 5%-ного порога значимости.

Да, давно мне счетчик liveinternet в пример не ставили. Видать, он стал очень крут.

Внутри div-блока я определил еще один div-блок, и во внутреннем блоке посредством margin вывел статичную картинку туда, куда надо.

Такой способ, поддерживают IE8. Проверил.

Совершенно верно. Но, можно было вторую картинку задать так же фоном для внутреннего div

<div class="background1">
    <div class="background2"></div>
</div>

А далее сам фон у внутреннего div можно позиционировать как угодно.

[SelenIT]

Видать, он стал очень крут.

Очень или не очень — не берусь судить, но список наиболее популярных сайтов и кол-во посещений по ним лично меня впечатляет. Кстати, у лидера таблицы — "вконтактика" — всего 2% посещений с IE8, у открывающего вторую десятку Кинопоиска — того меньше.

Openstat и StatCounter, правда, показывают пока не такие оптимистичные цифры... но у них и объем выборки ощутимо поменьше (у второго — похоже, вообще неизвестен).

можно позиционировать как угодно

Почти как угодно. На заданное расстояние от правого или нижнего края всё-таки так не отодвинуть.