Как добавить фон на сайт html через css

Как добавить фон на сайт html через css

Если Вы еще испытываете трудности в вопросе как настроить фон на сайте, Вам будет полезно ознакомиться с данной статьей. Из нее Вы узнаете как установить картинку в виде фонового изображения, задать параметры для его отображения, либо просто залить фон определенным цветом.

CSS нам в помощь

Как Вы уже догадались, устанавливать фон мы будем с помощью добавления CSS стилей к html объекту. За отображение фона элемента отвечает универсальное свойство background. Если нужно добавить фон к одному определенному элементу, то добавляйте CSS свойства к его идентификатору или классу. Если для всего сайта, то к тегу body или идентификатору (классу) контейнера (обертки), если он перекрывает body. В данной статье в примерах мы будем работать с элементом body.

Заливка цветом

Начнем с самого простого — заливкой определенным цветом. Для этого нам понадобиться знать лишь код цвета и CSS свойство background-color.

 body background-color: #000; /* Заливка фона черным цветом */ 
> 

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

Если Вы применяете заливку фона для определенного элемента, например, для заголовка (h1-h6), параграфа (p) и др., то убедитесь, что цвет текста не будет сливаться с фоном и не потеряет читабельность. Используйте свойство color для изменения цвета текста.

 p background-color: #000; /* Заливка фона черным цветом */ 
color: #fff; /* Белый текст для черного фона */ 
> 

Фоновое изображение

Фоновое изображение для элемента устанавливается при помощи свойства background-image, в котором в качестве значения используется путь к графическому файлу. Путь к файлу задается при помощи конструкции url(), где — это путь к графическому файлу. Если указать просто имя файла, например, url(background.png), то в данном случае изображение должно храниться в той же самой папке, что и css файл.

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

 body background-image: url(/images/background.png); /* Абсолютный путь к фоновому изображению background.png */ 
> 

Если используется фоновое изображение, то рекомендуется одновременно с ним указывать цветовую заливку (свойством background-color). В данном случае, если изображение не загрузится (изображение не доступно по каким-либо причинам; у пользователя отключен показ картинок), либо загрузится с задержкой (картинка полностью загрузится позднее страницы), то будет показана фоновая заливка вместо изображения или пока оно не загрузится полностью.

 body background-image: url(/images/background.png); /* Абсолютный путь к фоновому изображению background.png */ 
background-color: #ab11cf; /* Заливка фона определенным цветом */ 
> 

Данные два свойства из примера выше можно объединить в один, используя универсальное свойство background.

 body background: #ab11cf url(/images/background.png); /* Цвет заливки и путь к фоновому изображению */ 
> 

Свойство background

Универсальное свойство background позволяет задать все параметры отображения фонового изображения в одной строке. Рассмотрим доступные параметры.

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

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

background-attachment

Данное свойство определяет, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Если необходимо зафиксировать изображение, используйте значение fixed. В данном случае, изображение будет неподвижным при прокрутке содержимого страницы. Если необходимо, чтобы изображение перемещалось вместе с содержимом сайта, используйте значение scroll. По умолчанию устанавливается в значение scroll.

 body background-image: url(/images/background.png); /* Абсолютный путь к фоновому изображению background.png */ 
background-attachment: fixed; /* Изображение зафиксировано */ 
background-color: #ab11cf; /* Заливка фона определенным цветом */ 
> 

 body background: #ab11cf url(/images/background.png) fixed; /* Цвет заливки и путь к зафиксированному фоновому изображению */ 
> 

background-position

Если задано фоновое изображение, то данное свойство определяет его начальное положение. Имеет два значения, разделенные пробелом: положение по горизонтали и положение по вертикали. Значения можно задать при помощи ключевых слов: left right top bottom center. Порядок следования их не важен. Если же значения задаются в процентах, пикселях и т.п., то сначала указывается значение по горизонтали, а затем по вертикали. По умолчанию позиция устанавливается в левый верхний угол (left top).

background-repeat

Определяет способ повторения фонового изображения. Его можно повторять только по горизонтали (repeat-x), либо только по вертикали (repeat-y), либо одновременно по горизонтали и вертикали (repeat), либо без повторений вообще (no-repeat). По умолчанию устанавливается значение repeat.

inherit

Служит для явного указания наследования свойств от родительского элемента.

Свойства в CSS: цвет и фон

Для того, чтобы изменить цвет текста на HTML-странице, используется свойство color. Например, чтобы сделать элемент body зеленым, пропишите в CSS-файле следующее:

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

Теперь на нашей странице текст выделен зеленым цветом, а заголовки ㅡ красным:

Подчеркнем, что значениями свойства color могут быть как именные цвета (red, green и т.д.), шестнадцатеричные коды цветов (#00FF00, #0000FF и пр.), а также модели RGB (rgb 255, 0, 0).

Что касается фона, то при помощи CSS его можно задавать не только странице, но любым другим элементам, например, заголовкам и абзацам. За фон отвечает свойство background:

• background-color ㅡ цвет фона. Свойство не наследуется по умолчанию, однако это можно исправить, указав в значение inherit. Например, нам нужно сделать синий фон и белый заголовок на HTML-странице (элемент body):

background-color:#0000FF

• background-image ㅡ фоновый рисунок. Значение данного свойства ㅡ URL изображения. После него задается путь к нужному файлу (указывается в круглых скобках):

background-image: url(tree.jpg);

Например, в нашем случае фоновым изображением будет tree.jpg, лежащий в корневом каталоге. Свет фона ㅡ синий, а цвет текста ㅡ белый:

• background-repeat ㅡ повторение фонового изображения. Возможны следующие варианты:

1. repeat ㅡ повтор по горизонтали и вертикали.
2. repeat-x ㅡ повторять только по горизонтали.
3. repeat-y ㅡ повторять только по вертикали.
4. no-repeat ㅡ не повторять изображение.

background-repeat:repeat-x;

• background-attachment ㅡ прокрутка фонового изображения. Речь идет о том, должен ли фоновый рисунок прокручиваться на ряду с текстом или же он должен быть неподвижен. Значения для background-attachment:

1. scroll ㅡ фон прокручивается вместе с текстом (идет по умолчанию).
2. fixed ㅡ фоновое изображение неподвижно в момент прокрутки.

background-attachment:fixed;

• background-position ㅡ расположение изображения относительно окна браузера. Значение задается в процентах, единицах измерения, а также при помощи ключевых слов.

background-position:10% 30%;

background-position:50px 50px;

background-position:center top;

Также рекомендуем почитать:

Категории

• Блог
• Наши новости, акции, нововведения
• Руководства, статьи, инструкции
• Хостинг, домены, мировые новости, обзоры ПО
• Рейтинги, обзоры, отзывы
• Наши новости, акции, нововведения
• Руководства, статьи, инструкции
• Хостинг, домены, мировые новости, обзоры ПО
• Рейтинги, обзоры, отзывы
• RSS

Популярное в категории

• Новая услуга: VPS с выделенным накопителем
• Новая функция в cPanel: установка бесплатного SSL-сертификата от Let’s encrypt
• Авторизация через соцсети в Bitrix
• Создание простого и выпадающего меню на WordPress
• Cron в cPanel: запуск скрипта по расписанию
• Основы JavaScript. Урок 1. Введение в JavaScript. Что такое JavaScript.
• Что делать с ошибкой Strict Standards: Non-static method JLoader?
• Что лучше хостинг или vps?
• Где купить домен и хостинг?
• Инструкция по установке ISPmanager (последняя версия)
• SSL: понятие, суть, предназначение
• Добро пожаловать в наш блог!

Практика: работаем с фоновыми рисунками

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

Загрузка файлов и план работы

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

Загрузите архив с рабочими файлами. Документ index.html уже содержит всю разметку и необходимые файлы CSS и JavaScript. Файл style.css , по обыкновению, пока что пуст. Откройте оба файла в редакторе, а веб-страницу — также и в браузере.

План работы следующий:

1. Написание общих стилей.
2. Стилизация секций.
   • CSS для хедера.
   • CSS для блока Tour.
   • CSS для галереи.
   • CSS для блока подписки.
   • CSS для футера.
3. Проверка адаптивности.

1. Написание общих стилей

Для начала определим те стили, которые будут использоваться повсеместно. Сюда входит основной шрифт и фон страницы, размеры блока-контейнера, вид ссылок, общие стили заголовков, адаптивность картинок, форма и цвет кнопок. Добавьте этот код в таблицу style.css , разместив его под комментарием /* General */ :

body < font-family: 'Open Sans', sans-serif; font-size: 1em; color: #eee; background-color: #383838; background-image: url(../img/bg.png); >.container < width: 100%; max-width: 960px; margin-left: auto; margin-right: auto; >a < text-decoration: none; color: #fff; >h1, h2, h3 < text-transform: uppercase; >h2 < font-size: 32px; text-align: center; margin-top: 40px; margin-bottom: 40px; >img < display: block; max-width: 100%; height: auto; >.button, button < border: 0; background-image: linear-gradient(145deg, #dd0000, #ff3670); color: #fff; text-transform: uppercase; font-size: 1.2em; font-family: 'Open Sans', sans-serif; margin-top: 20px; margin-bottom: 20px; display: inline-block; >.button:hover, button:hover

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

Настройки для блока .container остаются идентичны стилям в предыдущем лендинге.

Стандартный подчеркнутый стиль для ссылок нам не нужен, поэтому мы отключаем его, а также меняем цвет с классического синего на белый. А текст всех заголовков, встречающихся на странице, мы делаем прописными буквами. Заголовкам добавляем отступы сверху и снизу (поскольку стандартные отступы обнулил файл Reset.css), задаем размер шрифта и выравниваем по центру.

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

Для тегов и ссылок с классом .button мы создали общий стиль, поскольку оба вида элементов должны выглядеть в нашем дизайне одинаково. Мы убрали рамку, которую дорисовывает браузер всем кнопкам, а также применили градиентный фон — вот и первый случай использования функции linear-gradient() на практике. При наведении на кнопку цвета градиента меняются местами.

Все остальные свойства CSS вы уже видели много раз, поэтому мы думаем, что вы легко поймете, за что они отвечают в данном коде. Что ж, двигаемся дальше!

2. Стилизация секций

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

CSS для хедера

Шапка сайта, или хедер, содержит в себе блок #topbar , где в свою очередь находится небольшое меню для навигации по странице. Как видно на макете, топбар должен занимать всю ширину страницы, быть полупрозрачным и как бы накладываться на фоновый рисунок. Есть еще один момент, который касается поведения топбара: при прокрутке страницы он должен оставаться на месте. Запишем такой стиль:

#topbar < width: 100%; background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; z-index: 999; /* подробно это свойство будет изучаться в поздних главах учебника, * а пока что просто добавьте его */ >

Разберем свойства по порядку. Первая строка весьма очевидна — мы указываем ширину блока. Во второй строке задан цвет в формате RGBA, который помимо цвета позволяет определять еще и его прозрачность (она записана четвертым параметром и равна 0.5 ). Следующее свойство — position: fixed; — сообщает браузеру, что элемент должен быть прикреплен к определенной точке на экране (которая указана в следующем свойстве) и не менять своего положения при скролле страницы.

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

Переходим к меню. Его пункты нужно расположить горизонтально, а буквы текста — преобразовать в прописные. Также для ссылок потребуется добавить внутренние отступы — во-первых, для того, чтобы визуально разделить их, а во-вторых, чтобы увеличить область кликабельности ссылки для большего удобства.

.menu li < display: inline-block; text-transform: uppercase; >.menu li a

Обновите веб-страницу. Топбар стал более высоким, но ссылки всё еще кажутся скучноватыми. Добавим немного динамики, дописав стиль для состояния :hover :

.menu li a:hover

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

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

header < background: url(../img/bg-01.jpg) center / cover no-repeat #666; min-height: 280px; /* также определим минимальную высоту хедера */ padding-top: 150px; /* и добавим отступы для содержимого */ padding-bottom: 50px; >

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

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

header h1 < font-family: 'Metal Mania', cursive; /* этот шрифт отличается от обычного */ text-align: center; /* выравниваем текст по центру */ font-size: 5.6em; /* задаем крупный размер шрифта */ color: #fafafa; /* устанавливаем слегка приглушенный белый цвет текста */ margin-top: 0; /* убираем верхний отступ конкретно для этого заголовка */ >

За заголовком следует большая, заметная кнопка, призывающая к действию. На практике она может вести к покупке билетов на концерт, прослушиванию музыки онлайн и т. п. Добавим для нее стиль:

header .button

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

CSS для блока Tour

Эта секция содержит в себе четыре блока .tour-card , расположенных в ряд. Каждый блок относится к определенному городу и у каждого из них есть свой фоновый рисунок и общее оформление. Сначала необходимо разобраться со стилем для всех блоков:

.tour-card

Каждый блок .tour-card будет иметь фиксированную ширину и высоту, а также отступы, поля и небольшую тень (для выразительности). При таких размерах все четыре карточки помещаются в один ряд. И, поскольку мы применили обтекание к блокам, понадобится воспользоваться хаком, о котором мы говорили на прошлой практике — для возвращения нормальной высоты родительского элемента:

#tour:after

По типу наполнения блоки не отличаются: в каждом из них есть такие элементы как .tour-town , .tour-place , .tour-date и .button . Стилизуем их в соответствии с дизайном в макете:

.tour-town < font-size: 1.2em; margin-bottom: 10px; >.tour-place < margin-bottom: 10px; >.tour-date < font-style: italic; font-size: 0.9em; >.tour-card .button

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

.tour-card.madrid < background: url(../img/tour/madrid.jpg) center / cover no-repeat #666; >.tour-card.turin < background: url(../img/tour/turin.jpg) center / cover no-repeat #666; >.tour-card.hamburg < background: url(../img/tour/hamburg.jpg) center / cover no-repeat #666; >.tour-card.krakow < background: url(../img/tour/krakow.jpg) center / cover no-repeat #666; >

Сохраните все изменения и обновите страничку в браузере. Вы увидите, как преобразовались все карточки. Одна проблема — белый текст местами не очень хорошо читается на фоне фотографий. Было бы хорошо немного затемнить их. Современный CSS позволяет это сделать: мы используем свойство background-blend-mode (перейдите по ссылке для подробного ознакомления с ним).

Добавьте следующий стиль к селектору .tour-card :

background-blend-mode: multiply;

Результат: фоновое изображение немного затемнилось. Объясним, что произошло: значение multiply в свойстве background-blend-mode означает, что значения нескольких цветов перемножаются, и на выходе получается более темный цвет. В нашем случае скрещиваются два слоя — фоновая фотография и фоновый цвет #666 . Недостаток этого свойства лишь в том, что оно поддерживается исключительно современными браузерами, и то не всеми (к примеру, IE и Edge до сих пор его игнорируют).

CSS для галереи

Приступим к оформлению галереи. Стиль для блоков с миниатюрами мы позаимствуем из предыдущего урока — в этом они абсолютно идентичны:

#gallery .photo

Добавим немного отзывчивости нашим графическим ссылкам:

#gallery .photo:hover

Вновь применим хак для контейнера, содержащего плавающие элементы:

#gallery:after

И добавим такую же тень, как у карточек с городами:

#gallery .photo img

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

CSS для блока подписки

Фоном блока #subscribe является изображение, слегка затемненное таким же способом, как мы затемняли фон блоков .tour-card . Остальные стили — простые: внутренние вертикальные отступы, внешний отступ сверху и выравнивание всего контента по центру блока.

#subscribe < background: url(../img/bg-02.jpg) center / cover no-repeat #666; background-blend-mode: multiply; padding-top: 40px; padding-bottom: 80px; margin-top: 40px; text-align: center; >

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

#subscribe .pitch

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

#subscribe input

Размеры кнопки также нужно немного подстроить:

#subscribe button

Сохраните стили и можете полюбоваться результатом. Нам осталось стилизовать футер.

CSS для футера

Футер в данном уроке — это, пожалуй, самый легкий блок в плане оформления. Добавьте ему внутренние отступы в размере 30 пикселей, задайте фоновый цвет #222 и фоновый рисунок, как для элемента , а также отцентрируйте строчное содержимое:

footer < padding-top: 30px; padding-bottom: 30px; background-color: #222; background-image: url(../img/bg.png); text-align: center; >

Для блока-контейнера социальных кнопок создайте небольшой отступ снизу, а для самих кнопок — горизонтальные внутренние отступы по 5 пикселей:

footer .social < margin-bottom: 20px; >footer .social a

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

footer .social a:hover

Шрифт текста об авторском праве чуть уменьшим:

footer .copyright

Сохраните файл стилей и проверьте страницу в браузере. Должно выглядеть круто!

3. Проверка адаптивности

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

Давайте проверим, как отображается наша новая веб-страница при разной ширине вьюпорта. Для большего удобства вы можете воспользоваться режимом имитации девайсов в браузере Google Chrome — удобный инструмент, при котором вы словно просматриваете сайт с iPhone, iPad и т. п.

Первое, что бросается в глаза — последний пункт верхнего меню переносится вниз на экранах шириной менее 480 пикселей. Мы можем немного уменьшить горизонтальные отступы у ссылок для этой категории девайсов, используя медиазапрос @media :

/* разместите этот код последним */ @media (max-width: 480px) < .menu li a < padding-left: 5px; padding-right: 5px; >.menu < text-align: center; /* центрируем меню — так смотрится лучше */ >>

За счет сжатия отступов все пункты теперь помещаются в одну строку даже на девайсах с маленькой шириной экрана в 320 пикселей.

Следующий недочет — карточки с городами. Если ширина экрана менее чем 980 пикселей, блоки начинают некрасиво съезжать во второй ряд по левой стороне. Один из вариантов решения данной проблемы — позволить блокам выстраиваться в несколько рядов, но при этом располагаться по центру. Для реализации этой идеи понадобится отменить несколько стилей, заданных ранее. Заметьте, что мы не будем убирать никакой код, а просто используем еще один медиазапрос, который перезапишет стили, если ширина экрана будет меньше 980 пикселей:

/* разместите этот код _над_ прошлым медиазапросом */ @media (max-width: 980px) < .tour-card < float: none; display: inline-block; >#tour < text-align: center; >>

Вкратце о том, что мы сделали. Для начала мы изменили способ выстраивания элементов один за другим: теперь он работает не за счет обтекания float , а за счет строчно-блочного поведения карточек. Когда дочерним элементам задано свойство display: inline-block , появляется возможность центрировать их по горизонтали как строчные элементы, добавив к родительскому блоку свойство text-align: center .

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

Третья (и последняя) правка адаптивности — это блок подписки на новости. Мы увеличим расстояние между строками текста, добавив свойство line-height элементу #subscribe .pitch p (не используя медиазапрос, т. е. разместим это правило среди обычных стилей). А также мы адаптируем стиль кнопки #subscribe button для экранов менее 480 пикселей, сделав ее ширину такой же, как ширина поля , и добавив небольшой отступ сверху.

/* разместите этот код в разделе Subscribe */ #subscribe .pitch p < line-height: 1.6; >/* а этот — в теле медиазапроса для max-width: 480px */ #subscribe button

Завершение

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

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

А вот и демо-версия готовой страницы:

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

Фон для сайта с картинкой на весь экран (background-size)

Веб технологии, как и различного рода тенденции в дизайне, не стоят на месте, поэтому каждый раз появляются какие-то оригинальные фишки и нюансы для сайтов. Одним из подобных «направлений» является использование фона (backgorund), который растягивается на весь экран по ширине и высоте. Что-то вроде около года назад или больше я рассказывал как сделать большой фон для сайта — изображение помещалось в шапку блога и плавно «переходило» в основной фоновый цвет веб-страницы. При желании можно даже добавить ссылку на фон подложки.

Размещение в качестве бекграунда большой масштабируемой картинки — это что-то новое и более сложное занятие, решение которого нашел в этой статье.

Цель данного урока разместить на сайте фоновую картинку, которая бы постоянно закрывала весь фон окна браузера. Что же конкретно нужно сделать:

• заполнить всю страницу одним изображением без пробелов;
• изменение размеров картинки при необходимости (уменьшении окна браузера);
• сохранение пропорций изображения;
• расположение изображения в центре страницы;
• отсутствие полос прокрутки на странице;
• кросс-браузерное решение, подходящее для разных браузеров;
• реализация без всяких сторонних технологий типа flash.

Итак, имеется сразу несколько подходящих решений для фона сайта на весь экран.

Замечательное, простое и прогрессивное решение с помощью CSS3

Для реализации задачи мы можем использовать свойство background-size в CSS3. Будем использовать элемент html который получше body. Установим фиксированный и центрированный бэкграунд, после чего будем использовать в background-size значение cover.

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Решение поддерживают почти все браузеры популярные в сети:

• Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
• Opera 10+ (Opera 9.5 поддерживает background-size но без значения cover)
• Chrome Whatever+
• IE 9+
• Safari 3+

Некий Goltzman нашел решение, которое позволяет работать хаку в IE

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’.myBackground.jpg’, sizingMethod=’scale’); -ms-filter: «progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’myBackground.jpg’, sizingMethod=’scale’)»;

Но внимание. при этом могут возникнуть некоторые проблемы с работой ссылок на странице. Кстати, чуть позже Matt Litherland добавил что код, в принципе, можно использовать но для этого нельзя применять элементы html или body а нужно реализовать все через div с 100% высотой и шириной.

CSS-хак номер 1

Альтернативную версию представляет Doug Neiner. В этом случае используется встроенный в страницу элемент , который может изменять размер в любом браузере. Устанавливаем значение min-height, которое способствует заполнению окна браузера вертикально и ставим 100% для width, что заполняет страницу горизонтально. Также ставим min-width чтобы изображение никогда не было меньшим, чем оно есть на самом деле.

Дальше в хаке используется опция @media для проверки является ли окно браузера меньшим чем изображение и с помощью процентного значения left и свойства margin-left выравниваем картинку по центру.

img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }

Работает в любых версиях качественных браузеров — Safari / Opera / Firefox и Chrome. Для IE как всегда есть свои нюансы:

• IE 9 — работает;
• IE 7/8 — чаще всего функционирует правильно, но не центрирует изображения меньше окна браузера;
• IE 6 — можно настроить, но кому вообще нужен этот браузер.

CSS-хак вариант 2

Еще один вариант решения задачи с помощью CSS стилей это разместить встроенное изображение на странице с фиксированной позицией в левом верхнем углу, после чего задать для min-width и min-height значение 100% сохраняя пропорции.

#bg { position:fixed; top:0; left:0; /* Preserve aspet ratio */ min-width:100%; min-height:100%; }

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

#bg { position:fixed; top:-50%; left:-50%; width:200%; height:200%; } #bg img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; }

• Safari / Chrome / Firefox (слишком ранние версии не тестировались, но в последних работает хорошо)
• IE 8+
• Opera (любая версия) и вместе с IE both оба глючат одинаково с ошибкой позиционирования.

Метод с jQuery

Данный вариант намного легче (с точки зрения CSS) если мы знаем что соотношение сторон картинки (img используется в качестве фона) больше или меньше текущего соотношения окна браузера. Если меньше, то мы можем использовать только width = 100% и при этом по ширине и высоте окно будет одинаково заполнено. Если больше — можно указать только height = 100% для заполнения всего окна.

Доступ ко всем данным идет через JavaScript, коды используются следующие:

#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

$(window).load(function() < var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() < if ( (theWindow.width() / theWindow.height()) < aspectRatio ) < $bg .removeClass() .addClass('bgheight'); >else < $bg .removeClass() .addClass('bgwidth'); >> theWindow.resize(function() < resizeBg(); >).trigger("resize"); >);

По моему, центрирование в этом случае не производится (насколько я понял), но его можно сделать. Поддерживается большинство десктопных браузеров, в том числе IE7+. Напоследок автор статьи про хаки подготовил набор файлов примеров, в которых это все реализована — скачать можно здесь. В комментариях к статье-оригиналу также содержится некоторая информация и обсуждение, хотя большинство важных деталей автор добавлял в виде апрейтов к посту и у меня он также переведены и указаны. Конечно, разобраться во всем этом помогут и примеры. В целом, если бы не постоянные «приколы» от IE7 все упомянутые хаки были бы идеальными.

P.S. Хотите купить книгу? — не обязательно ходить в магазине ведь сейчас онлайн книжный интернет магазин позволяет сделать все через сеть — выбрать, оплатить и оформить доставку на дом.

Как поставить фоновое изображение HTML

Здравствуйте. Нужно установить изображение на фон сайта. Лежит оно по пути «static/image/site_background.png» Прописываю в css файле
background-image: url(«image/site_background.png»);
Ничего не работает. Сайт почему-то ищет изображение по пути ‘main_page\css\site_background.png’ (то есть в url изображения добавляет url страницы, при чём главной вне зависимости от того, на какой странице находишься). Остальные static картинки вывожу так:

но делаю это в html файле. Пробовал применить такой способ к фону — не работает. Кто может, подскажите. Ума не приложу в чём дело.

Отслеживать
задан 6 апр 2020 в 15:16
141 3 3 серебряных знака 18 18 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

В css файле нужно указывать путь к файлу картинки относительно папки, в которой находится css файл.

Отслеживать
ответ дан 6 апр 2020 в 15:19
user176262 user176262

спасибо, получилось. А как мне указать переход на 1 папку назад? То есть выйти из папки, в которой css файл и зайти в другую?

6 апр 2020 в 15:27
@IIIyTH1K background-image: url(«../image/site_background.png»);
– user176262
6 апр 2020 в 15:28

• html
• css
• изображения

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как добавить фон на веб–страницу

wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали авторы-волонтеры.

Количество просмотров этой статьи: 27 327.

В этой статье:

Фон является одним из наиболее важных элементов веб-сайта. Хороший фон создает определенное настроение, шарм сайта и дополняет его содержание. Есть много различных способов добавить фон. Некоторые методы позволяют применить фон для всех страниц сайта, в то время как другие добавляют фон только на определенную страницу. Эта статья научит вас, как добавить фон на ваш сайт с помощью HTML или CSS.

CSS Несколько фонов

CSS позволяет добавлять несколько фоновых изображений для элемента через свойство background-image .

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

В следующем примере есть два фоновых изображения, первое изображение — цветок (выровненный по нижнему и правому краям), а второе изображение — фон бумаги (выровненный по верхнему левому углу):

Пример

#example1 <
background-image: url(../images/img_flwr.gif), url(../images/paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
>

Несколько фоновых изображений можно указать, используя либо отдельные свойства фона (как указано выше), либо сокращенное свойство background .

В следующем примере используется сокращенное свойство background (тот же результат, что и в примере выше):

Пример

#example1 <
background: url(../images/img_flwr.gif) right bottom no-repeat, url(../images/paper.gif) left top repeat;
>

CSS Размер фона

CSS свойство background-size позволяет указать размер фоновых изображений.

Размер можно указать в длинах, процентах или с помощью одного из двух ключевых слов: contain или cover.

В следующем примере фоновое изображение изменяется в размерах значительно меньше исходного изображения (с использованием пикселей):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Пример

#div1 <
background: url(../images/img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
>

Два других возможных значения для background-size это contain и cover .

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

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

Следующий пример иллюстрирует использование contain и cover :

Пример

#div1 <
background: url(../images/img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
>
#div2 <
background: url(../images/img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
>

Определить размеры нескольких фоновых изображений

Свойство background-size также принимает несколько значений для размера фона (используя список через запятую), при работе с несколькими фонами.

В следующем примере указаны три фоновых изображения с разными значениями фона для каждого изображения:

Пример

#example1 <
background: url(../images/img_tree.gif) left top no-repeat, url(../images/img_flwr.gif) right bottom no-repeat, url(../images/paper.gif) left top repeat;
background-size: 50px, 130px, auto;
>

Полноразмерное фоновое изображение

Теперь мы хотим, чтобы на веб-сайте было фоновое изображение, которое постоянно покрывало бы все окно браузера.

• Заполнить всю страницу с изображением (без пробелов)
• Масштабировать изображение по мере необходимости
• Центрировать изображение на странице
• Не вызывать полосы прокрутки

В следующем примере показано, как это сделать; используйте элемент (элемент всегда равен по крайней мере высоте окна браузера). Затем установите фиксированный и центрированный фон. Затем настройте его размер с помощью свойства background-size :

Пример

html <
background: url(../images/img_man.jpg) no-repeat center fixed;
background-size: cover;
>

Образ героя

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

Пример

.hero-image <
background: url(../images/img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
>

CSS свойство background-origin

CSS свойство background-origin указывает, где расположено фоновое изображение.

Свойство принимает три разных значения:

• border-box — фоновое изображение начинается с верхнего левого угла рамки
• padding-box — (по умолчанию) фоновое изображение начинается с верхнего левого угла края отступа
• content-box — фоновое изображение начинается с верхнего левого угла содержимого

В следующем примере показано свойство background-origin :

Пример

#example1 <
border: 10px solid black;
padding: 35px;
background: url(../images/img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
>

CSS свойство background-clip

CSS свойство background-clip определяет область рисования фона.

Свойство принимает три разных значения:

• border-box — (по умолчанию) фон закрашивается до внешнего края границы
• padding-box — фон закрашивается до внешнего края отступа
• content-box — фон закрашивается внутри поля содержимого

В следующем примере показано свойство background-clip :

Пример

#example1 <
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
>

Проверьте себя с помощью упражнений!

CSS Расширенные свойства фона

Свойство	Описание
background	Сокращенное свойство для установки всех свойств фона в одном объявлении
background-clip	Определяет область рисования фона
background-image	Определяет одно или несколько фоновых изображений для элемента
background-origin	Определяет, где расположены фоновые изображения
background-size	Определяет размер фонового изображения

Как добавить фон на сайт HTML?

Любая комната будет выглядеть намного лучше, если ее пол устилает дорогой персидский ковер. Так чем хуже ваш сайт? Может, пришла пора и его пол « застелить » дорогим изящным паласом ручной работы. Разберемся подробнее, как сделать фон для сайта:

Фон для сайта

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

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

Существует несколько способов того, как поменять фон на сайте. Для этого используются возможности CSS или html . Но многие из свойств для работы с фоном имеют одинаковое название и методику применения в этих веб-технологиях.

Основы работы с фоном в html

В качестве фона можно использовать несколько элементов:

• Цвет;
• Фоновую картинку;
• Текстурное изображение.

Разберемся с применением каждого из них подробнее.

Для того чтобы установить цвет заднего фона для сайта используется свойство background-color стилевого атрибута style . То есть, чтобы задать основной цвет для веб-страницы, нужно прописать его внутри тега . Например:

В html поддерживается всего 16 ключевых слов для задания цвета. Вот несколько из них: white, red, blue, black, yellow и другие.

Поэтому для того, чтобы установить фон для сайта html , лучше использовать шестнадцатеричный формат или RGB .

Кроме выбора цвета доступны и другие параметры настройки. Если свойству background-color задать значение transparent , то фон страницы станет прозрачным. Это значение данному свойству присвоено по умолчанию.

Теперь рассмотрим возможности языка гипертекста для установки фонового рисунка для сайта. Это возможно сделать с помощью свойства background-image .

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

• repeat-x – повторение фонового изображения по горизонтали;
• repeat-y – по вертикали;
• repeat – по обеим осям;
• no-repeat – повторение запрещено.

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

• Ключевым словом ( top , bottom , center, left, right) ;
• Процентами – отсчет начинается от верхнего левого угла;
• В единицах измерения ( пикселях ).

Воспользуемся самым простым вариантом центрирования:

Бывает, что нужно зафиксировать положение рисунка при прокрутке. Поэтому прежде, как сделать картинку фоном сайта, воспользуйтесь специальным свойством background-attachment . Принимаемые им значения:

Нам нужно последнее значение. Теперь код нашего примера будет выглядеть вот так:[/HTML]

Текстурный фон сайта

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

Такой объем никак не влияет на скорость загрузки страницы браузером при высокоскоростном соединении с интернетом. Но как быть с мобильным интернетом, при использовании которого загрузка нескольких « метров » займет много времени?

Все эти проблемы решаются с помощью текстурного фона. В нем в качестве рисунка текстуры используется маленькое изображение. Даже при условии его многократного повторения рисунок загружается лишь один раз.

Для создания темного фона для сайта заходим в Photoshop , создаем изображение в виде полоски длинной 1200 пикселей, и шириной 15 пикселей. Затем применяем простой черно-белый градиент и подключаем получившуюся текстуру к странице сайта:

Для наглядности мы добавили текст и задали его цвет с помощью свойства color . Вот что получилось:

Средства CSS

Все свойства, описанные выше, также применимы и для каскадных таблиц стилей. Создадим фон сайта css , переписав код одного из наших предыдущих примеров:

Результат будет аналогичным.

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

Как сделать фон сайта картинкой HTML

В прошлой статье мы говорили о том, как изменить цвет фона на сайте с помощью атрибутов тега body и CSS-стилей: Фон в HTML. В текущей статье речь пойдет об использовании изображений в качестве фона на сайте, о том как растянуть фон на всю ширину страницы и зафиксировать его.

Картинка в качестве фона страницы — HTML

Рассмотрим сначала способ задания фонового изображения на сайте с помощью атрибута background тега body:

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

Примечание: Фоновое изображение и цвет фона рекомендуется задавать не с помощью HTML, а с помощью CSS. В таком случае код будет валидным и более правильным.

Картинка в качестве фона страницы — CSS

В CSS фоновый цвет и фоновое изображение можно задать одним свойством background:

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

Если вы хотите растянуть фоновое изображение на весь размер окна браузера, используйте свойство background-size: 100%;

В конструкторе сайтов «Нубекс» для любого сайта можно использовать большое изображение в качестве фона и закрепить его.

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

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

Еще по теме: Как сделать подпись к картинке в HTML: простой гайд

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

Background-color

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

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

/* черный фон сайта */ body /* черный фон заголовка, белый цвет шрифта */ h1

Background-image

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

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

Background-size

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

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

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

Background-repeat

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

• background-repeat: repeat-x — изображение повторяется только по горизонтали
• background-repeat: repeat-y — изображение повторяется только по вертикали
• background-repeat: repeat — изображение повторяется по горизонтали и вертикали
• background-repeat: no-repeat — изображение не повторяется

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

• background-attachment: scroll — прокручивается вместе со страницей
• background-attachment: fixed — при прокрутке фон остается неподвижным

Background-position

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

• в фиксированных единицах (пикселы, сантиметры)
• в процентах
• словесно: — top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).

• background-position: 20px 50px — изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
• background-position: 50% 25% — расположено по центру по горизонтали и отступает на 25% сверху.
• background-position: right bottom — рисунок располагается снизу справа.

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

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

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

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

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

High Star

Уроки веб-мастеру

Как самому с нуля сделать сайт? Здесь даны основы сайтостроения, которых еще никто не отменял. Как пользоваться такими программами, как PhotoShop, ImageReady и другими. Полезные советы вебмастерам.

Фон для странички

Bgcolor и Background

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

Короче, вопросов — множество! А ответ всего один. Ну нету такого тега вообще! Еще не придумали!

Но не огорчайтесь! Нет тега и не надо! Зато есть два чудесных атрибута известного нам дескриптора BODY. Так что встречайте старого знакомого!

Фон, или как принято называть задний фон в переводе на английский означает background. Поэтому нет ничего проще запомнить два атрибутика, созданных в его честь. Один — background, а другой — bgcolor.

Так чем же они отличаются? Какими возможностями обладают? И, главное, чем будут нам полезны?

Начнем, с самого простого — bgcolor. Этот атрибут отвечает за цвет фона. Вы можете подставить любое значение, в буквенном или в числовом значении цвета и ваш фон окрасится как по волшебству.

Что ж, ради примера можем открыть наш шаблон, либо любой, созданный нами ранее файл и попытаться залить страничку любимым цветом. Я же открою свою страничку index.html в NotePad (Блокнот) и внесу следующие изменения:

Листинг 11. Файл index.html

Сохраним наше творение под тем же именем и посмотрим, что получилось:

Я на синем фоне

Если по каким-то причинам вам не нравится голубой фон, можете взять другой цвет, например розовый, можете даже писать цвет не буквами, а числами. Только не забудьте впереди числа поставить решетку. И все у вас получится! Можете поиграть разными цветами, пока не надоест. А как надоест, будем читать дальше про другой атрибут — background.

Этот атрибут указывает не на цвет изображения, а на картинку, которую стоит поместить в качестве фона, или как еще говорят, фоновых обоев. Обои можно подобрать любые, какие только подскажет вам фантазия. Моя фантазия подсказала мне взять картинку, на которой я в новом пиджаке. А потому, не мудрствуя лукаво, открываю свой файл index.html и делаю следующие изменения:

Листинг 12. Файл index.html

Сохраняем этот файл и смотрим, что у нас получилось

оно — фоновое изображение!

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

Но нельзя ли загрузить одну картину, но на весь экран? В принципе, можно! И мы сейчас этим займемся. Единственно, что необходимо учесть, так это размеры изображения. Так, при разрешении экрана 800 х 600, свободного места для изображения, если вычесть все верхние и нижние панели, остается 781 х 476 пикселей. Вот и подберем такое изображение.

Поэтому я опять открываю программу Adobe Photoshop, выбираю фотографию с изображением моря, подгоняю его размеры под искомые 781 х 476, оптимизирую для web и сохраняю под именем fonsea.jpg в своей папке foto. Ну и затем, иду проторенным путем: открываю файл index.html и ввожу следующие изменения:

Еще по теме: Как сделать HTML кнопку?

Листинг 13. Файл index.html

Опять сохраняем и смотрим результат

И вот оно — море! Играет, шумит на просторе…

Красиво, правда? Вот если бы это разрешение экрана было установлено у всех пользователей! Но, увы! Стоит мне увеличить разрешение до 1152 х 864 и получается уже следующая картина:

Печально я гляжу на это отраженье.

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

Хотя бывает красота и без жертв. Которая великолепно будет смотреться на всех мониторах без исключения. И я попытаюсь в этом помочь. Как вы заметили, фон заполняется копиями рисунка. И этим свойством не грех и воспользоваться. Мы ведь можем сделать одну маленькую картинку, которая займет памяти намного меньше большой, и заполним ею весь экран. Тут главная хитрость постараться сделать эту картинку «без швов». То есть, чтобы не было видно стыков между соседними изображениями. И для этого нам опять понадобится незаменимая программа Adobe Photoshop.

Конечно, можно особо и не утруждаться, и взять готовые фоновые картинки из Интернета, где они просто кишмя кишат. Для этого можно набрать в любой поисковой системе (www.yandex.ru, www.apport.ru, www.ramber.ru и многих других) заветные слова (фон, фоновые обои, background) и к вашим услугам предстанут десятки и десятки сайтов, готовые отдать вам эти фоны за ради бога, и что особо радует, совершенно бесплатно.

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

Как сделать фон в HTML

Дата публикации: 2016-08-15

От автора: всех приветствую. Фоновые цвета и изображения в веб-дизайне имеют огромную роль, так как позволяют более привлекательно оформить любые элементы. Как сделать фон в html, мы рассмотрим сегодня.

Можно ли обойтись средствами html при задании фона?

Сразу скажу, что нет. Вообще html не создан для того, чтобы оформлять веб-страницы. Это просто очень неудобно. Например, там есть атрибут bgcolor, с помощью которого можно задавать фоновый цвет, но это очень неудобно.

Соответственно, мы будем использовать каскадные таблицы стилей (css). Там гораздо больше возможностей для задания бэкграунда. Мы сегодня разберем самые основные.

Как задать фон через css?

Итак, прежде всего вам нужно определиться с тем, какому элементу нужно задать фон. То есть нам нужно найти селектор, к которому мы будем писать правило. Например, если фон нужно задать всей странице в целом, то можно сделать это через селектор body, всем блокам – через селектор div. Ну и т.д. Фон можно и нужно привязывать к любым другим селекторам: стилевым классам, идентификаторам и т.д.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

После того, как вы определились с селектором, нужно написать само название свойства. Для задания фонового цвета (именно сплошного цвета, не градиента и не картинки) используется свойство background-color. После него нужно поставить двоеточие и написать сам цвет. Это можно сделать по-разному. Например, с помощью ключевых слов, hex-кода, форматов rgb, rgba, hsl. Любой способ подойдет.

Чаще всего используется способ шестнадцатеричного кода. Для подбора цветов можно использовать программу, в которой видно код цвета. Например, photoshop, paint или какой-либо онлайн-инструмент. Соответственно, для примера пропишу общий фон для всей веб-страницы.

Я советую вам сейчас создать на рабочем столе html и css файлы, подключить css к html и повторять за мной. Так вы поймете все намного лучше, чем если просто читать. Для работы с файлами советую использовать программу Notepad++. Назовите первый файл, например index.html, а второй — style.css. Подключить css к html можно так:

Этот код нужно вставить в секцию head. Важно, чтобы файлы находились в одной папке.

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

Картинка в качестве фона

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

Создадим пустой блок с идентификатором:

Зададим ему явные размеры и фон:

Из этого кода вы можете видеть, что я использовал новое свойство – background-image. Оно предназначено как раз для вставки картинки в качестве фона html-элементу. Посмотрим, что получилось:

Чтобы задать картинку, вы должны после двоеточия написать ключевое слово url, а потом в круглых скобках указать путь к файлу. В данном случае путь указан исходя из того, что изображение лежит в той же папке, что и html-документ. Также нужно указать формат изображения.

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

Но заметили ли вы одну особенность? Браузер взял и размножил картинку по всему блоку. Так вот, чтобы вы знали, это поведение фоновых картинок по умолчанию – они повторяются по вертикали и горизонтали до тех пора, пока могут влезь в блок. По этим поведением вы можете легко управлять. Для этого используют свойство background-repeat, у которого есть 4 основных значения:

Repeat – значение по умолчанию, изображение повторяется по обеим сторонам;

Repeat-x – повторяется только по оис x;

Repeat-y – повторяется только по оси y;

No-repeat – не повторяется вообще;

Каждое значение вы можете прописать и посмотреть, что же случится. Я пропишу так:

Теперь повторение только по горизонтали. Если прописать no-repeat, то была бы только одна картинка.

Отлично, на этом уже можно заканчивать, так как это базовые возможности работы с фоном, но я вам покажу еще 2 свойства, которые позволяют получить вам больше возможностей в управлении.

С помощью повторения верстальщики раньше достигали того, что создавали фоновые текстуры и градиенты, используя одно малюсенькое изображение. Оно могло быть 30 на 10 пикселей или еще меньше. А может и немного больше. Изображение было таким, что при его повторении по одной или даже по обеим сторонам, не было видно переходов, так что в итоге получался единый цельный фон. К слову, такой подход стоит использовать и сейчас, если вы хотите использовать бесшовную текстуру на своем сайте в качестве фона. Градиент же сегодня уже можно реализовать методами css3, об этом мы еще обязательно поговорим.

Еще по теме: Как изменить цвет ячеек в таблице HTML: простые и эффективные способы

Позиция фона

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

Задавать его можно по-разному. Один из вариантов, это просто указать стороны в которых должна находиться картинка:

То есть по вертикали все так и осталось: фоновая картинка располагается сверху, но по горизонтали мы изменили сторону на right, то есть правую. Еще один способ задать позицию – в процентах. Отсчет при этом начинается в любом случае с верхнего левого угла. 100% — весь блок. Таким образом, чтобы поместить картинку ровно по центру, запишем так:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Запомните одну важную вещь, связанную с позиционированием – первым параметром всегда указывается позиция по горизонтали, а вторым – по вертикали. Итак, если вы видите значение 80% 20%, то можно сразу заключить, что фоновое изображение будет сильно сдвинуто вправо, но вниз при этом сильно не уйдет.

Ну и наконец, прописывать позицию можно в пикселях. Все то же самое, только вместо % будет px. В некоторых случаях может понадобиться и такое позиционирование.

Сокращенная запись

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

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

Далее мы рассмотрим другое свойство – размер фона. Его уже не задашь сокращенно в качестве параметров в сокращенной записи.

Управляем размером фоновой картинки

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

Как можно поступить в таком случае? Конечно, самым простым и разумным вариантом будет просто уменьшение картинки, но не всегда есть возможность это сделать. Допустим, она лежит на сервере и в данный момент нет времени и возможности ее уменьшить. Проблему можно решить с помощью свойства background-size, которое можно назвать относительно новым и которое позволяет манипулировать размером фонового изображения, да и вообще любого фона.

Итак, моя картинка сейчас занимает все пространство в блоке, но я задам ей размер фона:

Опять же, первым параметром задается размер по горизонтали, вторым – по вертикали. Мы видим, что все правильно применилось –фото стало размером на 80% ширины блока в ширину и наполовину в высоту. Тут только нужно внести одно уточнение – задавая размер в процентах вы можете повлиять на пропорции картинки. Так что будьте внимательны, если хотите не нарушить пропорции.

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

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

Contain – отмасштабирует так, чтобы картинка полностью влезала в блок в максимальном своем размере.

Преимущества этих значений в том, что они не изменяют пропорции картинки, оставляя их прежними.

Также вы должны понимать, что растягивание картинки может привести к ухудшению ее качества. Могу привести пример из жизни и реальной практики верстальщиков. Все знают и понимают, что при верстке под десктопы нужно адаптировать сайт под основные ширины мониторов: 1280, 1366, 1920. Если вы возьмете фоновую картинку размером, допустим, 1280 на 200, и не зададите ей background-size, то экранах с шириной больше появится пустое место, картинка не будет заполнять ширину полностью.

В 99% случаев это не устраивает веб-разработчика, поэтому он задает background-size: cover, чтобы картинка всегда тянулась на максимум по ширине окна. Это хороший прием, который нужно использовать, но теперь вы столкнетесь с проблемой, что пользователи с шириной экрана 1920 пикселей могут увидеть картинку неоптимального качества.

Я напомню, она растянется на максимум по ширине. Соответственно, качество автоматически ухудшится. Единственно правильным решением тут будет изначально использовать картинку большего размера – 1920 пикселей в ширину. Тогда на самых широких экранах она будет в своем натуральном размере, а на других просто будет потихоньку обрезаться, но при этом, при грамотном подборе фоновой картинки, на внешний вид сайта это не повлияет.

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

Полупрозрачный фон с помощью css

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

Для примера я задам всей странице в качестве фона картинку, которую мы использовали ранее в примерах. Блоку же с идентификатором bg, на котором мы проводим все наши эксперименты, зададим фон с помощью формата задания цвета rgba.

Как я уже и говорил ранее, в css есть много форматов для задания цвета. Один из них – rgb, достаточно известный формат тем, кто работает в графических редакторах. Он записывается так:rgb(17, 255, 34);

Первым значением в скобках идет насыщенность красного, потом зеленого, потом синего. Значение может быть числовым от 0 до 255. Соответственно, формат rgba ничем не отличается, только добавляется еще один параметр – альфа-канал. Значение может быть от 0 до 1, где 0 – полная прозрачность.

Соответственно, для задания средней полупрозрачности нужно записать примерно так: