Как сделать кликабельный фон сайта
Как сделать фон для сайта?
Любая комната будет выглядеть намного лучше, если ее пол устилает дорогой персидский ковер. Так чем хуже ваш сайт? Может, пришла пора и его пол « застелить » дорогим изящным паласом ручной работы. Разберемся подробнее, как сделать фон для сайта:
Фон для сайта
Бывает так, что старый дизайн сайта уже приелся. И хочется чего-нибудь новенького и вкусненького. А новый дизайн будет таковым, если его приготовить своими руками.
Но менять полностью весь дизайн ресурса самостоятельно – вещь неблагодарная. Да и не у всех под это дело как надо « заточены » руки. Поэтому легче всего освежить старый шаблон, изменив цвет фона ресурса или его фоновое изображение.
Основы работы с фоном в html
В качестве фона можно использовать несколько элементов:
Разберемся с применением каждого из них подробнее.
В html поддерживается всего 16 ключевых слов для задания цвета. Вот несколько из них: white, red, blue, black, yellow и другие.
Предположим, что мы разрабатываем сайт о поэзии, и в качестве подложки нужно использовать изображение Пегаса. Крылатый конь будет олицетворять свободу творческой мысли поэта!
Среди перечисленных вариантов нас интересует последний. Перед тем, как поменять фон сайта, используем его в своем коде:
Воспользуемся самым простым вариантом центрирования:
Нам нужно последнее значение. Теперь код нашего примера будет выглядеть вот так:[/HTML]
Текстурный фон сайта
В первом примере для фона мы использовали большой и красивый пейзаж пустыни. Но за такую красоту приходится платить сполна. Вес изображения, выполненного в высоком качестве, может достигать нескольких мегабайт.
Такой объем никак не влияет на скорость загрузки страницы браузером при высокоскоростном соединении с интернетом. Но как быть с мобильным интернетом, при использовании которого загрузка нескольких « метров » займет много времени?
Все эти проблемы решаются с помощью текстурного фона. В нем в качестве рисунка текстуры используется маленькое изображение. Даже при условии его многократного повторения рисунок загружается лишь один раз.
Средства CSS
Результат будет аналогичным.
Ну, вот мы и рассмотрели все варианты, как поменять фон на сайте. Теперь осталось лишь создать рисунок будущего ковра и расстелить его на страницах своего ресурса. Но это уже ваших рук дело.
Как сделать большой фон для сайта через 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;
Все равно фон уменьшается при изменении окна браузера..
Павел, странно, вроде все работало ранее. Можете пройти по ссылкам на демо того или иного варианта реализации и подсмотреть код этих страниц. Демка для первого варианта находится тут.
Как Сделать Свое Брендирование Или Кликабельный Фон Сайта
Загрузил: SEO Pirat
Длительность: 3 мин и 48 сек
Css Анимация Элементов При Наведении
Как Сделать Кнопку Наверх Вверх На Сайте Как Вконтакте Плавный Скролл Html Css Jquery
Сколько Можно Заработать С 1000 Посетителей На Киносайте
Сколько Зарабатывает Т7 Рыбак За 1 Час Albiononline
Стоит Ли Создавать Свой Бренд Как Продавать Китайские Товары Под Своим Брендом
Бизнес В Нише Igaming Сетка На 5000 Сайтов И Свои Продукты Контент Продвижение И Монетизация
Точка G // как зарабатывают в IT
Как Избежать Блокировки Ркн За Копию Заблокированного Сайта
Выбор Тематики Для Доходного Сайта В Буржунете
Сколько Зарабатывает Доходный Сайт Под Amazon С 100 Посетителей Кейс
Как Легко Найти Нишу Под Amazon Лайфак От Царя
Дроп Домен Для Англоязычного Сайта Как Найти И Отобрать Теория И Практика
Хайповые Запросы Для Сайта
Бесплатный Аналог Ahrefs Serpstat И Semrush
Как Размещать Профильные Ссылки В 2019
Ahrefs Полный Oбзор 2020
Что Такое React Js Обзор Возможностей Для Начинающих План Изучения
Анализ Конкурентов Для Сайта Под Amazon Через Ahrefs
Привлечение Целевого Трафика Бесплатно Мощная Рабочая Методика Продвижения Сайтов И Партнерок
100секретов Бизнеса фан канал сайта-библиотеки 100секретов.рф
4 Способа Прижать Футер К Низу Страницы Sticky Footer Html Css
Sopranoman Go Lova Lova
Дмитрий Гревцев Настенька Моя
Erger 2021 Haykakan
Yarichin Bitch Club Music Box Version
Любить Бандита Очень Сложно Забыть Бандита Невозможно Тик Ток
El Mundo Es Mío Bad Bunny
Мелодия Сирены Из Сериала Сирена
Can T Carry This Anymore
За Миллиард Лет До Конца Света
Добрые Руки С Неба
Doglan Gunun Gutly Bolsun Mp3
Ты Мне Лайк А Я Тебе
Пожелтел Тюремный Клен
Three Days Grace Strange Days Mylky Remix
Тобою Дышала И Сердце Устала
Я Буду Идеальным Богом Не Оригинал Гачалайфгачаклуб
Eat Life With Kimchi Seafood Boil Drenched In Red Curry Sauce Bites Only
Wakinyan Luta He Sapa 2018
Как Сделать Свое Брендирование Или Кликабельный Фон Сайта
Receptes D Aperitius De Nadal
A First Person Perspective Of The Jonsered Cs 2253
Los Angeles Metro Rail Expo Blue Red Gold Line
Cinematic Hdr Video Dji Mavic Air 2 4K Sunset Drone Footage
Nikon D800E Г Курск Градиент На Фото
Motown At Whiteshield Powwow 2018 2
Men S Traditional Twin Buttes 2016 1
Sturgeon Lake Round Dance
Jbl Pulse 3 Bass Test
Intermec Ck71 Set Microsoft Security
Vivere A Londra Prime Impressioni
Zebra 105Sl Plus Printhead Platen Roller Cleaning
New Whatsapp Status Why This Kolaveri Kolaveri Di Song Status