Цвет фона страницы html
Цвет фона — это один из важных элементов любой интернет-страницы. Главная задача фона — формировать у пользователя настроение и привлекать внимание, делать восприятие информации на сайте удобным и легким.Атрибуты фона для веб-страниц — тег <body> и bgcolor.
Меняем цвет фона и шрифта в HTML коде сайта
В данной статье речь пойдет о том, как же самостоятельно изменить цвет шрифта и фона в HTML-коде, т.е. на странице сайта. Проще всего сделать это при помощи CSS.
Первое, что необходимо запомнить, цвета в CSS указываются также, как и в HTML. А если подробнее, то вы можете указывать их как в шестнадцатеричном значении, к примеру #ff3355, так и указывать название цвета (red, blue, green и прочие).
А теперь давайте рассмотрим более подробно свойства. Начать стоит со свойства color, которое задает основной цвет или цвет переднего плана любого элемента. К примеру, если вы хотите задать синий цвет для текста, форма записи будет <span style=»color: blue»>оформление текста </span>.
Существует также атрибут background-color, который отвечает за параметры фона. С его помощью можно изменить цвет фона. К примеру, если вы хотите задать фон текста красного цвета, форма записи будет <span style=»background-color: red»>оформление текста </span>.
Вставить фоновое изображение для элемента, поможет свойство background-image. Если одновременно для элемента задать цвет фона, то от не будет отображаться до того момента, пока фоновое изображение не загрузиться полностью.
Задать начальное положения для фонового изображения, поможет свойство background-position. Свойство имеет два значения, положение может быть как по горизонтали, так и вертикали. Кроме того, положение может быть задано в процентах, пикселях и других удобных для вас единицах.
how to set the background color of the whole page in css
I am trying to set the background color of the page at yumdom.com to yellow.
I have tried the following and it fails:
Also note that if in the developer tools in Chrome I highlight either one of the html elements above, I get only a certain portion of the page highlighted. A footer and the section below the content remain un-highlighted.
I want the yellow to fill the entire space between the header and the footer and leave no white space out.
Note that we are using YUI Reset, Fonts, and Grids CSS templates V 2.8.0r4
Фон для сайта (свойство CSS background)
Если вы заметили, слегка приукрасил Дизайн Манию, добавил текстуры в фон. Сразу же появилась идея рассказать вам как именно мне удалось это сделать. Открываю данным постом рубрику «Верстка» раздела «Веб-дизайн». В данной категории планирую публиковать статьи, заметки, рекомендации и уроки по HTML, CSS, а также, возможно, JavaScript. Материал постараюсь размещать простой и с пояснениями, чтобы понятно было всем читателям. Думаю, подобная информация пригодится многим блоггерам, которые хотят, но не могут подправить собственные дизайны из-за отсутствия навыков верстки.
Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость бекграунда как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже:
Background-color
Задает цвет фона. Можно применять к отдельным элементам <h1>, <p> или ко всему сайту через через тэг <body>:
/* черный фон сайта */ body < background-color: #000; >/* черный фон заголовка, белый цвет шрифта */ 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, дальше вас ожидает еще много интересных секретов!
Настройка фона CSS
Любому элементу HTML: div блоку — <div> , таблицe — <table> или же ячейку в таблице, то через CSS можно задать цвет фона, а также в качестве фона можно установить ту или иную картинку, рисунок.
Использование CSS для оформления сайтов можно обсудить в специально созданной теме нашего форума.
Цвет фона блока CSS
Цвет задаётся через синтаксис » background » — переводится, как «фон» и наименование самого цвета — либо просто английскими словами (gray — серый, white — белый и так далее) или цифровым значением, например #F9FCBC. Добавим к двум блокам разные значения цвета фона:
Цвет фона всей страницы
Таким же образом можно задать цвет фона страниц всего сайта, делается это так:
В этом примере все страницы сайта, которые подключены к общему css файлу станут серым цветом.
Картинка в качестве фона
Чтобы установить картинку в качестве фона, необходимо применить к элементу следующий css код:
- #name — название элемента
- (image.gif) — адрес расположенного рисунка в интернете, он также может указываться полностью, например: http://www.wikijournal.ru/myimages/picture.jpg
Ко всему прочему можно задавать настройки к фону, например:
где значение «position» указывает на тип метода позиционирования, используемого для элемента (static, relative, fixed or absolute)
- static — статичное,
- fixed — зафиксированное,
- absolute — абсолютное значение,
- relative — относительное,
Градиент в качестве фона
Средствами CSS можно сделать фон блока, таблицы, ячейки или всей страницы градиентом, настроить цветовую палитру, размер и задать направление. Сделать это можно следующим способом:
На выходе получим такой результат:
В зависимости от своих задач по оформлению, вёрстки сайта можно менять следующие параметры:
- Тип градиента:
- Линейный градиент — linear-gradient
- Радиальный градиент — radial-gradient . Радиальный градиент может иметь следующие параметры:
- Тип градиента: круг ( circle ) и эллипс ( ellipse ) и центральную точку градиента, например:
- Направление градиента:
- to top — градиент снизу вверх
- to bottom — градиент сверху вниз
- to left — градиент справа налево
- to right — градиент слева направо
- to top left — градиент к верхнему левому углу
- to top right — градиент к верхнему правому углу
- to bottom left — градиент к нижнему левому углу
- to bottom right — градиент к нижнему правому углу
- 45deg — устанавливается наклон в градусах
- #efefef , #ffffff — кодом цвета HTML
- white , black — общепринятыми в HTML названиями цветов
- Можно устанавливать любое количество цветов в градиенте и их распределение в процентном соотношении, например:
CSS тэги для оформления фона
- background — основной тэг, определяющий свойства фона того или иного HTML элемента (таблицы, блока div и т.д.)
- background-attachment
- background-clip
- background-color — определяет цвет фона HTML элемента.
- background-image — задаёт картинку или фотографию в качестве фона.
- background-origin
- background-position — позиционирование картинки или фотографии внутри какого-либо HTML элемента.
- background-repeat
- background-size — задаёт размеры картинки или фотографии внутри какого-либо HTML элемента.
Примечание
Если же есть какие-либо вопросы как установить фон к тому или иному элементу на странице, то можно задать вопрос и обсудить тему на странице обсуждения нашего форума.