Как сделать большой фон для сайта через CSS
В последнее время большие фоновые изображения в блогах или сайтах стали достаточно популярными. Оно и не удивительно — классно подобранный фон может послужить основным источником восприятия того или иного проекта, ведь давно известно, что посетитель составляет свое впечатление о сайте в первые 10 секунд.
Предлагаю ознакомиться с несколькими CSS техниками для создания большого фонового изображения с использованием одного или двух изображений. Это базовый урок, который потом можете применять при реализации кликабельного фон сайта со ссылкой и в других задачах, связанных с бекграундом.
Перед тем, как начать, взгляните на наиболее распространенную ошибку:
Если у вас есть большое фоновое изображение, которое отлично выглядит при разрешении монитора 1280 пикселей, то для бОльших экранов эффект от сайта может быть слегка испорчен из-за «обрезанного фона» (см. рис. выше).
Пример 1.
Самый простой способ избежать этой ошибки — сделать так, чтобы края изображения были такого же цвета, как и фон сайта (BODY background color). Хорошо данный пример иллюстрирует картинка ниже:
Мы видим, что по краям макета используется сплошной цвет для фона. Реализация данного варианта на CSS достаточно проста — вы «прижимаете» изображение фона к верху и центрируете его по центру.
Кстати, в одном из постов я уже рассказывал о свойстве CSS background и его возможностях. Код для примера выглядит так:
body { padding: 0; margin: 0; background: #f8f7e5 url(изображение.jpg) no-repeat center top; width: 100%; display: table; } |
Последние 2 строки кода предотвращают уменьшение фонового изображения при изменении размеров окна браузера (в частности в Firefox).
Пример 2. Двойные изображения
Демо реализации можете глянуть здесь. Здесь для фона задано повторяющееся изображение, а большая картинка помещена в слой DIV, обрамляющий весь код. Реализацию можете глянуть на «живом примере» по ссылке выше, ничего сложного вроде нет.
В качестве большого изображения для фона используется картинка (в формате GIF) с прозрачным фоном, цвет которой максимально приближен к цвету BODY.
Пример 3. Небесный фон.
Для данного варианта используется градиентное изображение в 1 пиксель, которое повторяется горизонтально (задается в теге BODY). Облака центрируются с помощью дополнительного слоя DIV — демо верстки можно глянуть здесь.
Данный пост является переводом статьи — How to: CSS Large Background с потрясающего дизайнерского блога webdesignerwall. Кстати там же есть красивая подборка сайтов с большими изображениями для фона.
P.S. Создаем лого Web 2.0 в GIMP — для любителей альтернативного софта.
(9 оценок, среднее: 6,67 из 7)
Загрузка...
!о :; очень полезная статья :: нужно будет обязательно попробовать ::
А я уже встречал эту статью, на английском правда… :)
Дизайн блога в первом примере похож на дизайн моего блога… точнее наоборот :)
хай! Вот с этим не согласен:
«Для данного варианта используется градиентное изображение в 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 применить следующее:
<!—[if lte IE 6]>—>
бла-бла-бла
filter: expression(”progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”+
this.firstChild.src+”‘, sizingMethod=’image’)”);
бла-бла-бла
Наскока я знаю, эти два способа всё равно действуют одинаково, так как образаются к одной и той же библиотеке, поэтому разницы особой нет. Если неправ — поправьте.
А вы знаете более простые методы?
Ого дискуссия пошла:) Нешуточная.
W32Blaster, в последних сайтах я встрачаю вариант2 — добавляется еще один файлик ie6.css, который подключается с условием <!—[if IE]> … <![endif]—>, а в нем уже прописывается filter: expression.
В принципе, ничего сложного в этом не вижу. Тут главное один раз найти решение, а потом его использовать.
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 взломан=)
бабушкин, посмотрел, вроде все нормально.
2 строчки помогли. =)
Очень полезная статья
Как сделать фиксированное фоновое изображение при масштабировании страницы?, как тут — samsung.com/ru/
Блин,Спасибо!Как раз искал,то что нужно.
Очень интересная и полезная статья) помогла мне сделать прекрасный задний фон! )спасибо!)))
Помогите пожалуйтата сделать двойное изображение! Как это осуществить? И возможно ли сделать тройное?
Спасибо большое, очень полезно.
Учень увлекательная статья))
Спасибо. Давно искал как сделать фон на сайте. Сейчас попробую
хорошая статья. только вопрос – а что делать если при добавлении фонового изображения сайт начинает притормаживать при прокрутке вниз ?
за ранее спасибо!
СoD, если все дико тормозит — я бы отказался от такого решения в пользу более простого варианта.
Не подскажите как сделать задний фон на отдельном материале сайта
Анжела, это зависит от движка, который использует сайт. Вам нужно будет для определенной страницы сайта добавить в BODY какой-то класс и для этого класса через CSS определить другую картинку.
Не работает код
width: 100%;
display: table;
Все равно фон уменьшается при изменении окна браузера..
Павел, странно, вроде все работало ранее. Можете пройти по ссылкам на демо того или иного варианта реализации и подсмотреть код этих страниц. Демка для первого варианта находится тут.
Спасибо Ваша статья очень помогла.