Как сделать задний фон кликабельным

Фон для сайта (свойство CSS background)

Если вы заметили, слегка приукрасил Дизайн Манию, добавил текстуры в фон. Сразу же появилась идея рассказать вам как именно мне удалось это сделать. Открываю данным постом рубрику «Верстка» раздела «Веб-дизайн». В данной категории планирую публиковать статьи, заметки, рекомендации и уроки по HTML, CSS, а также, возможно, JavaScript. Материал постараюсь размещать простой и с пояснениями, чтобы понятно было всем читателям. Думаю, подобная информация пригодится многим блоггерам, которые хотят, но не могут подправить собственные дизайны из-за отсутствия навыков верстки.

Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость бекграунда как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже:

Background-color

Задает цвет фона. Можно применять к отдельным элементам

или ко всему сайту через через тэг :

/* черный фон сайта */ body < background-color: #000; >/* черный фон заголовка, белый цвет шрифта */ h1

Background-image

Используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:

Обратите внимание как указан путь к изображению — это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать полный путь к изображению. Опция пригодится если вы захотите, например, добавить кликабельный фон на сайте.

Background-size

Определяет размер фонового изображения.

Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.

Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.

Background-repeat

Используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:

background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:

Background-position

Задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:

Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

background: #000 url(«my-image.jpg») no-repeat fixed left bottom;

Если какое-то свойство пропускается, то его значение установлено по умолчанию.

Надеюсь, данный урок вам пригодился, подписываемся на обновления блоге через RSS, дальше вас ожидает еще много интересных секретов!

Источник

Кликабельное фоновое изображение в WordPress сайте (2 варианта)

Сегодня рассмотрим одну из задач с wordpress фоном, которая иногда возникает при проведении рекламных кампаний в интернете. Бывает, заказчикам нужно реализовать в веб-проекте «брендированную подложку» — это некая графика на заднем плане веб-страницы по бокам от основного блока контента (см. превьюшку данного поста). Причем важно, чтобы картинка при клике отправляла посетителей на внешний URL-адрес. Собственно, решил собрать в посте всю инфу про то как сделать кликабельное фоновое изображение для сайта WordPress.

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

Кликабельный фон через HTML + CSS

Это единственный полноценный и работающий метод, который, в принципе подойдет не только для WP, но и в любых других CMS и даже онлайн ресурсах на чистом HTML.

Алгоритм приблизительно следующий:

1. Первым делом вам надо после открывающегося тега body добавить код:

Сделать это можно отредактировав файл шаблона header.php (или какой-то другой для хедера). В итоге должно получится что-то вроде:

2. Дальше переходим к стилям в styles.css, и тут есть 2 принципиально разные ситуации:

2.1. Первый метод чаще применяется в рекламных кампаниях, т.к. на графику больше внимания уделяется именно в шапке сайта. В данном случае в CSS стилях надо прописать:

Важные нюансы:

2.2. Во втором случае, когда бекграунд фиксированный, стили styles.css отличаются несколькими параметрами:

Важно(!) посмотрите нюансы после предыдущего кода — они аналогичные. Из изменений появились значения fixed для свойств background-attachment и position + высота height: 100%. При желании можно растянуть фоновую картинку на весь экран (используется background-size: cover в элементе body). Скролинг фона, если что, здесь также допускается.

Идея модификации. Если вы умеете добавлять новые опции в Customizer или ориентируетесь во WordPress фрейморках настроек то, теоретически, можете сделать так, чтобы пользователь/клиент в админке лишь загружал фотку/изображение и вводил адрес URL для перехода.

Плагины кликабельного фона сайта на Вордпресс

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

WP-Backgrounds Lite

WP-Backgrounds Lite добавляет ссылку и кастомный бекграунд на отдельные посты, реализация, судя по всему, выполнена через JS скрипт. Из негатива тут обновление более 3х лет назад (хотя 5тыс скачивания это круто) + авторы внедряют скрытые обратные линки в код страницы через display: none (ай, нехорошо;).

Идея модификации — сначала разобраться в исходниках каким образом и где именно подставляются значение картинки фона сайта на Вордпресс и внешней URL, а затем подменить на свои.

Если менять их придется не часто, можно «втупую» прописать все в коде WP-Backgrounds Lite, заодно избавившись от лишних внешних линков. Если захотите все сделать красиво, дополнительно внедрите для пользователей ввод соответствующих параметров в Настройщике темы.

Backdrop

В Backdrop основная и единственная функция — добавление в WordPress фонового изображения причем делается это через Customizer темы дабы даже новички смогли установить желаемые настройки. Из минусов — всего лишь 200 скачиваний, хотя решение одно из самых свежих. В админке оно выглядит действительно максимально просто и удобно.

Здесь, как видите, всяческие опции считываются через настройщик темы, поэтому появилась идея добавить поле, куда бы люди вписывали внешний URL ссылки. Затем редактируете исходник плагина, заменяя выводимый в шаблоне контейнер DIV на A — он идет как раз после body, как в самом первом примере + оттуда же копируете нужные CSS стили. По идее, должно сработать.

Итого. На самом деле мне очень странно, что нет толкового модуля, решающего нашу проблему, кликабельное фоновое изображение в WordPress сайте — вполне нормальная задача. Хотя, уверен, платные наработки все это умеют.

Как бы делал я? Если пользователю (или вам лично) не понадобится менять URL/подложку достаточно часто, то реализация через чистый HTML+CSS — вполне норм. В противном случае, когда проект делается под клиента, я бы дополнительно немного «заморочился с допиливанием» плагина Backdrop и внедрением нового параметра в Customizer. Визуально там настройки в теме меняются очень быстро и легко.

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

Источник

Кликабельный фон / подложка для сайта через HTML, CSS, JS

Реализацию данной задачи вы наверняка встречали на крупных порталах, так как подобный рекламный брендинг привлекает максимум внимания посетителей и является более эффективным чем обычные баннеры. Сегодня рассмотрим как сделать фон ссылкой на сайте с помощью HTML, CSS, Javascript и некоторых других «подручных средств».

Ранее в блоге уже публиковались статьи по схожей тематике, например, про большую фоновую картинку у веб-страниц или создание изображения на весь экран но все эти варианты были не кликабельные. Тем не менее, для общего развития и улучшения навыков советуем их изучить.

Кликабельная подложка для сайта через HTML и CSS

Если искать решение в интернете, то найдете несколько заметок с более простой или сложной реализацией, с интеграцией брендинга под WordPress CMS и др. Скомпоновав все эти знания и советы в один код и немного его модифицировав, получили следующий результат:

Визуально выглядит как-то так:

Важные пояснения по примеру:

Высота подложки сайта

В коде вы можете видеть заданную высоту height:1200px — следовательно HTML ссылка фона будет активна только в данном диапазоне. Это пригодится, когда рекламный брендинг должен располагаться исключительно в шапке сайта, а потом через полупрозрачный переход постепенно сливаться с обычным бекграундом (по которому кликать уже не получится).

В принципе, значение height при желании легко перемещается из тега А в CSS.

Внимание! Если же вам надо сделать наоборот, чтобы абсолютно вся подложка была кликабельной, то, во-первых, удаляете опцию height из HTML, а во-вторых, для идентификатора #ad_bg в стилях используете:

Из новых фишек здесь: высота 100% + позиционирование блока fixed. При этом значение background-attachment для бекграунда может быть как фиксированное, так и со скроллингом.

Рандомные кликабельные фоновые картинки

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

В CSS-файле создаете несколько стилей с разными background:url (photo1.jpg, photo2.jpg и photo3.jpg):

Далее перед body добавляете скрипт случайной выборки параметров из массива:

Суть следующая: каждый раз при генерации страницы выбирается рандомное число от 1 до 3х, а затем оно подставляются в код и указывает порядковый номер ячейки массива.

Здесь важно:

Кликабельный фон сайта с ссылкой через Javascript

Если по каким-то причинам первый способ решения задачи вам не подошел, то есть парочка на JS. Следует заметить, что в примерах ниже используются совсем другое оформление, поэтому визуальный результат тестирования у вас получится несколько иной. Однако в данном случае важным является именно Javascript, — все остальное подправите уже после его внедрения.

Ну, и дальше сам скрипт. Можете сделать из него отдельный JS-файл либо прописать сразу в body:

2. Исходник второго решения, к сожалению, не сохранился, остался лишь код:

Здесь для события onclick был добавлено открытие нового окна с указанным URL. Его вместе с адресом подложки под сайт следует заменить на свои. Оформление также следует подправить под себя. Оба метода тестировались, и на момент написания поста все работало.

Реализация на Вордпресс и доп.нюансы

Во-первых, пару слов следует сказать про добавление ссылки на фон в одной из самых популярных CMS систем. Всю информацию по теме найдете в статье про кликабельное фоновое изображение WordPress сайта где описано 2 метода:

Как оказалось, сейчас в системе нет на 100% подходящих бесплатных плагинов. Ранее в Дизайн Мании мы рассказывали о двух возможных вариантах по теме, но один из них (Background Manager) уже недоступен/удален.

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

Также советуем почитать статью о брендированной рекламной подложке — почему этот формат интересует рекламодателей, какие нюансы и вопросы возникают при его внедрении и т.п.

Если вы знаете еще какие-то варианты как сделать фон ссылкой, делитесь ими в комментариях.

Источник

Как сделать большой фон для сайта через CSS

В последнее время большие фоновые изображения в блогах или сайтах стали достаточно популярными. Оно и не удивительно — классно подобранный фон может послужить основным источником восприятия того или иного проекта, ведь давно известно, что посетитель составляет свое впечатление о сайте в первые 10 секунд.

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

Перед тем, как начать, взгляните на наиболее распространенную ошибку:

Если у вас есть большое фоновое изображение, которое отлично выглядит при разрешении монитора 1280 пикселей, то для бОльших экранов эффект от сайта может быть слегка испорчен из-за «обрезанного фона» (см. рис. выше).

Пример 1.

Самый простой способ избежать этой ошибки — сделать так, чтобы края изображения были такого же цвета, как и фон сайта (BODY background color). Хорошо данный пример иллюстрирует картинка ниже:

Мы видим, что по краям макета используется сплошной цвет для фона. Реализация данного варианта на CSS достаточно проста — вы «прижимаете» изображение фона к верху и центрируете его по центру.

Кстати, в одном из постов я уже рассказывал о свойстве CSS background и его возможностях. Код для примера выглядит так:

Последние 2 строки кода предотвращают уменьшение фонового изображения при изменении размеров окна браузера (в частности в Firefox).

Пример 2. Двойные изображения

Демо реализации можете глянуть здесь. Здесь для фона задано повторяющееся изображение, а большая картинка помещена в слой DIV, обрамляющий весь код. Реализацию можете глянуть на «живом примере» по ссылке выше, ничего сложного вроде нет.

В качестве большого изображения для фона используется картинка (в формате GIF) с прозрачным фоном, цвет которой максимально приближен к цвету BODY.

Пример 3. Небесный фон.

Для данного варианта используется градиентное изображение в 1 пиксель, которое повторяется горизонтально (задается в теге BODY). Облака центрируются с помощью дополнительного слоя DIV — демо верстки можно глянуть здесь.

Данный пост является переводом статьи — How to: CSS Large Background с потрясающего дизайнерского блога webdesignerwall. Кстати там же есть красивая подборка сайтов с большими изображениями для фона.

P.S. Создаем лого Web 2.0 в GIMP — для любителей альтернативного софта.

!о :; очень полезная статья :: нужно будет обязательно попробовать ::

А я уже встречал эту статью, на английском правда… 🙂

Дизайн блога в первом примере похож на дизайн моего блога… точнее наоборот 🙂

хай! Вот с этим не согласен:

«Для данного варианта используется градиентное изображение в 1 пиксель, которое повторяется горизонтально (задается в теге BODY).»

Мне один оооочень талантливый верстальщик-дизайнер-прогер говорил, что лучше использовать для повторяющегося фона полоску в 10-15 пикселей, потому что он будет быстрее грузиться браузером, нежели тонка полоса в 1 пиксель. Совет на будущее.

W32Blaster, интересное мнение! Признаться сталкиваюсь с ним впервые, но звучит логично.

Я солидарен с W32Blaster полоска в один пиксель «попахивает» маразмом до чего нужно быть жадным, чтобы 100КБ пожалеть

Если градиент сохранён в jpg — то лучшая его ширирна 8 px. Обусловлено алгоритмом сжатия jpeg. Если больше или меньше хотя бы на пиксель — объём будет больше, а качество ниже.
А для gif — разница в размере файла 1 px и 15 px будет не существенна.

Почему у тебя не все пункты в меню активны.

yura, не совсем понял вопрос — о каких пунктах меню речь?
Если в меню, то просто о некоторых темах еще не писал.

Мнение о вреде заполняющей полоски 1px интересно. Не знаю, где сейчас актуальна такая проблема, возможно, в телефонах и смартфонах. Да, если у вас очень слабый процессор, очень мало оперативки и вы любите открывать сразу пару десятков ссылок — тогда для вашего компьютера действительно сложно будет заполнять фон тонкими полосками. Но тогда большинство флэш-баннеров у вас тоже будет показывать, как слайд-шоу, потому что сейчас принято делать скорость от 40 кадров в секунду и выше.

Если фон можно порезать на полоски шириной 1px, это нужно делать. И никакого сохранения в JPEG — этот формат всегда сохраняет с потерей качества. Если на полоски в один пиксель порезана не фотография (ну мало ли), она должна быть сохранена в GIF. Вес картинки гиф зависит от количества цветов на изображении и сжатие происходит за счет уменьшения их количества. Даже градиенты лучше сохранять в гиф — не будет разводов на фоне.

Не совсем согласен с gravitacia. Градиент лучше сохранять в PNG, потому что у них есть алгоритм сжатия для градиентов и даже можно попробовать на практике — градиент в PNG займёт меньше, чем в GIFе или в JPG. Да и по качеству получше будет.

А на счёт быстродействия компов — очень многие пользователи сидят на ноутах. Какой-бы навороченный лапик не был бы, всё равно он будет уступать стационарке и быстродействие будет хуже. Во всяком случае, если говорить про ноуты средней ценовой категории. А там всё же нужно заботится о том, как быстро твой сайт загружается. Так что не нужно пренебрегать оптимизацией своей странички.

w32blaster, я тоже люблю PNG, но применять его нужно достаточно осторожно: IE6, который входит в самую популярную версию винды, не поддерживает альфа-прозрачность. Начинающий вестальщик, который обновил свой эксплорер до 7й версии и просмотрел его 3й мозилой, просто не узнает, что его креативная полупрозрачность половине посетителей попроще кажется серым фоном. В комменте не получится описать все тонкости сохранения картинок при верстке, отдельная статья нужна. Спасибо за идею. напишу в своем блоге, как время появится.

По поводу слабых ноутов… Когда в шапке тяжелая активная флэшка, сбоку колонка флэшевых баннеров, выпадающее джаваскриптовое меню и аяксовые комменты — абсолютно безразлично, фон сделан шириной в 1пх или 20пх. На заполнение фона потратится миллионные доли процента производительности ноута по сравнению с проигрыванием одного флэш-баннера. Это вопрос чисто теоретичский, так как пользователей с Pentium II и широкополосным интеренетом крайне мало

gravitacia, постой-постой, а никто и не говорил про прозрачность PNG! Речь шла о градиентной заливке фона! Тут никаких проблем нету с прозрачностю, с которой, кстати, я столкнулся совсем недавно. Решается она встраиванием простым JS-файликом (я написал на своём ЖЖ об этом). Но я прекрасно понимаю, что это не панацея. Так что если мы говорим о прозрачности, то нужно очень чётко понимать, какой формат тебе нужен. Если можно ограничиться ГИфом, то лучше использовать его. В случае про градиентный фон — всё верно: ПНГ занимает меньше места, чем ГИФ.

Встраивать простой JS-файлик, чтобы показать прозрачность в PNG? 🙂 Да уж, вы легких путей не ищете :).

Градиентную заливку запросто можно делать с альфапрозрачностью. Часто ее так делают дизайнеры в фотошопе, начинающий верстальщик же, по аналогии со слоями PSD, вместо объединения слоев, может создать слой с градиентом от цвета к прозрачности. Увидев, что такой градиент сохраняется и хорошо отображается в ПНГ через мозилу или оперу, он будет его использовать дальше. Пока заказчик не покажет ему его сайт в IE6.

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

А вы знаете способ заставить показывать ИЕ6 не через JS? Поделитесь? Можно через CSS, но там всё равно будет обращение к одной и той же либре и, насколько я знаю, через JS проще. Ну во всяком случае, я нарыл в нете только такой способ. Поделитесь знаниями 🙂

И ещё такой вопрос: какой смысл использовать альфа-прозрачность для градиентного фона? Почему б просто не вставить грамотно нарисованный градиент как обычную картинку? Ну так, как описано в статье? Исключением будет тот случай, если у нас заливка идёт не горизонтальная, а вертикальная. Скажем, ореол вокруг рамки-контейнера. Тут всё понятно. А если случай такой же, как в примерер 3 выше (с небом) — разве имеет смысл включать альфа-прозрачность?

w32blaster, все гениальное — просто. Верстка должна быть максимально простой и однозначно трактуемой браузерами. Чем более «новые» и модные средства применяются, тем больше вариантов вашего сайта увидят посетители. Качественная верстка — это когда сложный макет сделан максимально простыми и понятными средствами. А вот чтобы обойтись простыми средствами и нужен опыт. Это было лирическое отступление 🙂

А по сути вашего вопроса: при верстке нельзя использовать альфа-прозрачность. И еще лет 5 нельзя будет точно, пока кто-то не создат операционку популярнее, чем WinХР. В большинстве случаев, как вы и говорили, достаточно не наслаивать картинки одна на другую, а объединить слои и вставить одну картинку. Но если так сделать нельзя (например, логотип компании с тенью или свечением должен «плавать» по центру шапки при резиновой верстке по неоднородному фону), логотип можно сохранить в GIF. С тенями, но на прозрачном фоне. При этом альфа-прозрачность будет приеобразована в цвет, который можно задать при сохранении файла GIF или PNG8 в Фотошопе — параметр Matte(по умолчанию этот цвет белый). Помогает во многих случаях.

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

Так вы на вопрос и не ответили по поводу излечения IE6. Лично я встречался с двумя примерами:
1) просто вставить JS-файлик и он сделает всё сам.
2) в CSS применить следующее:
—>

filter: expression(”progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”+
this.firstChild.src+”‘, sizingMethod=’image’)”);

Наскока я знаю, эти два способа всё равно действуют одинаково, так как образаются к одной и той же библиотеке, поэтому разницы особой нет. Если неправ — поправьте.

А вы знаете более простые методы?

Ого дискуссия пошла:) Нешуточная.

В принципе, ничего сложного в этом не вижу. Тут главное один раз найти решение, а потом его использовать.

w32blaster, я описывал не один из ваших способов, а третий: как решить проблему альфа-прозрачности без скриптов. По поводу ваших способов я ничего сказать не могу — я никогда не делал ничего подобного. Мне очень редко приходилось прописывать код отлельно для какого-то браузера, обычно, мой код однозначно понимается.

неплохая статья, спасибо!

и при прокрутке вверх кстати тоже 🙂

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

27 килобайт изображение весит

А еще можно приделывать к правому краю, не обязательно по центру, это полезно, когда вставляешь dif с файлом png.

nikolay, если у вас браузер опера, то возможно вы масштаб страницы сделали 90%, У МЕНЯ К ПРИМЕРУ страница именно в этом случае прокручивается с тормозами

и еще у меня ВОПРОС:

как можно прописать в css чтоб фон задавался так:
картинка сверху
фон из цвета
картинка снизу
?
буду очень признателен за ответ

В качестве примера используется сайт Design Jobs on the Wall. Здесь для фона задано повторяющееся изображение, а большая картинка помещена в слой DIV, обрамляющий весь код

Подскажите пожалуйста как это сделать, как поместить gif картинку в слой div
пример кода может быть? м?…

Serega, можно зайти на их сайт (Design Jobs on the Wall) и посмотреть как все сделано.

Ага, можно тока браузер код пишет по своему.
Просто понять не могу. Этот рисунок, он вроде и фон и проявляется полностью, даже там где нет текста, по бокам например. Как это сделано

Serega, так вроде бы в посте есть пример, где для фона используется
background: #f8f7e5 url(изображение.jpg) no-repeat center top;
Оно и красит фон в цвет выбранный и добавляет картинку.

хм…во втором примере, В IE фон будет тупо отображаться (из-за прозрачности)

Я всегда таким способом работал, только фон лучше искать такой, чтобы меньше весил))

Описываете полезные вещи и простыми примерами, понятными всем, СПС! Самое сложное при задании фона на зацентренную верстку сайта. Необходимо мало того сделать оптимальным вес изображения, но сделать так, чтоб совподал рисунок по бокам. Я работала например на сайтом evitann точка ру. Было не просто, лично для меня.

Скажите лучше, как подобрать цвет, чтобы цвет фона и полоски совпадали, а не была полоска на порядок светлее или же темнее… нужно что-то типо пипетки, как в фш

У меня такой вопрос, мне хочется сделать шапку, в ней хочу сделать 3 фона слева, справа, по центру. те ширена левого и правого фона 125, по центру 200, у всего остольного пространтсва цвет фона #fff. пожайлуста подскажите решение

Design Jobs on the Wall взломан=)

бабушкин, посмотрел, вроде все нормально.

Очень полезная статья

Как сделать фиксированное фоновое изображение при масштабировании страницы?, как тут — samsung.com/ru/

Блин,Спасибо!Как раз искал,то что нужно.

Очень интересная и полезная статья) помогла мне сделать прекрасный задний фон! )спасибо!)))

Помогите пожалуйтата сделать двойное изображение! Как это осуществить? И возможно ли сделать тройное?

Спасибо большое, очень полезно.

Учень увлекательная статья))

Спасибо. Давно искал как сделать фон на сайте. Сейчас попробую

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

Не подскажите как сделать задний фон на отдельном материале сайта

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

width: 100%;
display: table;

Все равно фон уменьшается при изменении окна браузера..

Павел, странно, вроде все работало ранее. Можете пройти по ссылкам на демо того или иного варианта реализации и подсмотреть код этих страниц. Демка для первого варианта находится тут.

Источник