Как поменять фон на фото или картинке [простые способы]

Содержание:

HTML таблица цветов
Чтобы залить фон цветом
Таблицы с картинкой вместо фона: HTML примеры
CSS background-image — фоновая картинка на сайте
- 4.1. CSS background-repeat
- 4.2. CSS background-attachment
- 4.3. CSS background-position
- 4.4. CSS background-size
Используем jQuery
Управление позицией фонового изображения
Положение фона
Проверка адаптивности
Цвет в HTML: Цвет фона
Статьи по теме
Техника с использованием только CSS. Часть #1.
Удивительный, простой и прогрессивный метод CSS3
Добавление подложки в Майкрософт Ворд
- Способ 1: Добавление стандартной подложки
- Способ 2: Создание собственной подложки
- Решение возможных проблем
Как же сделать меняющийся фон для сайта?
Время для практического занятия
Как сделать фон в виде цвета в CSS?
Резюме
Основные инструменты для задания фона веб-страниц
Как сделать фон на сайте html
Объединение свойств
Зачем создавать фон страницы
О картинке на заднем фоне таблицы.
Заключение

HTML таблица цветов

Вот таблица с обозначениями некоторых цветов (многие из них также доступны в «темном» и «светлом» вариантах, например: “darkblue”, “lightblue” ):

цвет	ключевое слово	шестнадцатеричное обозначение
оранжевый	orange	#ffa500
синий	blue	#0000ff
белый	white	#ffffff
желтый	yellow	#ffff00
серый	gray	#808080
коричневый	brown	#a52a2a
черный	black	#000000
красный	red	#ff0000
зеленый	green	#008000
фиолетовый	violet	#ee82ee

Кстати цвет фона ячейки в таблице задан вот таким образом

Количество доступных цветов зависит от видеокарты. Сегодня мы переходим от минимального разрешения 256 цветов к разрешению, которое обеспечивает миллионы цветов.

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

Чтобы залить фон цветом

5 способов поиска по фото или картинке

Для заливки фона у тэга BODY есть атрибут BGCOLOR.

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

 <HTML>
<HEAD>
<TITLE>
Виды облаков
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">
Виды облаков
</H1>
<P ALIGN="JUSTIFY">
<B><I>Перистые облака</I></B> имеют толщину от сотен метров до нескольких километров.
Они состоят из ледяных кристаллов в форме игл, столбиков, пластинок.
</P>
<P ALIGN="JUSTIFY">
<B><I>Перисто-кучевые облака</I></B> характеризуются небольшой шириной- 200-400 м. Структура облаков комковая. Они прозрачные.
</P>
<P ALIGN="JUSTIFY">
<B><I>Перисто-слоистые облака</I></B> имеют вид белой или голубоватой полупрозрачной пелены. Их толщина колеблется от 100 м до нескольких километров.
</P>
<P ALIGN="JUSTIFY">
<B><I>Высоко-кучевые облака</I></B> выглядят как белые, иногда сероватые волны, состоящие из пластин или хлопьев, разделенных  просветами голубого неба, но могут сливаться и в сплошной покров. Толщина слоя высоко-кучевых облаков около 200-700 м. Из них выпадает дождь, снег.
</P>
<P ALIGN="JUSTIFY">
<B><I>Высоко-слоистые облака</I></B> образуют сплошной серый или синеватый "ковер" на небе с нижней границей обычно на высоте 3-5 км. Толщина облачных слоев 1-2 км.
</P>
<P ALIGN="JUSTIFY">
<B><I>Слоисто-кучевые облака</I></B>-это серые облака, состоящие из крупных гряд, волн, пластин, разделенных просветами или сливающимися в сплошной серый волнистый покров. Состоят преимущественно из капель.
</P>
<P ALIGN="JUSTIFY">
<B><I>Слоистые облака</I></B> представляют из себя однородный серый или серо-желтый покров.
</P>
<P ALIGN="JUSTIFY">
<B><I>Слоисто-дождевые облака</I></B> выглядят как сплошная серая пелена, закрывающий все небо в виде гряд и валов. Они состоят из водяных капель, редко в смеси со снежинками.
</P>
<P ALIGN="JUSTIFY">
<B><I>Кучевые облака</I></B> подразделяют на кучевые, кучевые средние и кучевые мощные. Толщина 1-2 км, иногда 3-5 км.
</P>
<P ALIGN="JUSTIFY">
<B><I>Кучево-дождевые облака</I></B> - очень мощные облачные скопления.
</P>
</BODY>
</HTML>

Результат:

Для того чтобы залить фон голубым фоном в тэге BODY нужно указать атрибут BGCOLOR.

 <BODY BGCOLOR="#3399FF">

И укажем, что мы хотели бы видеть текст белого цвета.

Это можно указать с помощью тэга <FONT COLOR=”FFFFFF”>. Но если нужно указать, чтобы текст всей страницы был одного цвета, это можно указать в тэге BODY

 <BODY TEXT="#FFFFFF">

В результате получим код

 <HTML>
<HEAD>
<TITLE>
Виды облаков
</TITLE>
</HEAD>
<BODY BGCOLOR="#3399FF" TEXT="#FFFFFF">
<H1 ALIGN="CENTER">
Виды облаков
</H1>
<P ALIGN="JUSTIFY">
<B><I>Перистые облака</I></B> имеют толщину от сотен метров до нескольких километров.
Они состоят из ледяных кристаллов в форме игл, столбиков, пластинок.
</P>
<P ALIGN="JUSTIFY">
<B><I>Перисто-кучевые облака</I></B> характеризуются небольшой шириной- 200-400 м. Структура облаков комковая. Они прозрачные.
</P>
<P ALIGN="JUSTIFY">
<B><I>Перисто-слоистые облака</I></B> имеют вид белой или голубоватой полупрозрачной пелены. Их толщина колеблется от 100 м до нескольких километров.
</P>
<P ALIGN="JUSTIFY">
<B><I>Высоко-кучевые облака</I></B> выглядят как белые, иногда сероватые волны, состоящие из пластин или хлопьев,разделенных  просветами голубого неба,но могут сливаться и в сплошной покров. Толщина слоя высоко-кучевых облаков около 200-700 м. Из них выпадает дождь,снег.
</P>
<P ALIGN="JUSTIFY">
<B><I>Высоко-слоистые облака</I></B> образуют сплошной серый или синеватый "ковер" на небе с нижней границей обычно на высоте 3-5 км. Толщина облачных слоев 1-2 км.
</P>
<P ALIGN="JUSTIFY">
<B><I>Слоисто-кучевые облака</I></B>-это серые облака, состоящие из крупных гряд, волн, пластин, разделенных просветами или сливающимися в сплошной серый волнистый покров. Состоят преимущественно из капель.
</P>
<P ALIGN="JUSTIFY">
<B><I>Слоистые облака</I></B> представляют из себя однородный серый или серо-желтый покров.
</P>
<P ALIGN="JUSTIFY">
<B><I>Слоисто-дождевые облака</I></B> выглядят как сплошная серая пелена, закрывающий все небо в виде гряд и валов. Они состоят из водяных капель,редко в смеси со снежинками.
</P>
<P ALIGN="JUSTIFY">
<B><I>Кучевые облака</I></B> подразделяют на кучевые, кучевые средние и кучевые мощные. Толщина 1-2 км, иногда 3-5 км.
</P>
<P ALIGN="JUSTIFY">
<B><I>Кучево-дождевые облака</I></B> - очень мощные облачные скопления.
</P>
</BODY>
</HTML>

А в браузере увидим:

Таблицы с картинкой вместо фона: HTML примеры

Как поменять фон на фото в фотошопе

Нарисуем таблицу 2х3 и сделаем ее фоном картинку, сохраненную в папке “Images”: (table background = “Images/Picture.jpg”) (tr) (td)1(/td) (td)2(/td) (td)3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). Так наша таблица будет закрашена в фон картинки.

Теперь нарисуем эту же табличку размерами 2х3, но вставим картинку в столбики под номером 1, 4, 5 и 6. (table)(tr)(td background = “Images/Picture.jpg”)1(/td) (td)2(/td) (td)3(/td)(/tr) (tr)(td background = “Images/Picture.jpg”)4(/td) (td background = “Images/Picture.jpg”)5(/td) (td background = “Images/Picture.jpg”)6(/td) (/tr) (/table). После просмотра видим, что фон появляется только в тех ячейках, в которых мы прописали, а не во всей таблице.

CSS background-image — фоновая картинка на сайте

Как поменять фон на фото

Свойство CSS background-image — позволяет установить фоновое изображение на сайте.

Синтаксис CSS background-image

Например, для установки общего (глобального) фона:

Например фоновая картинка:

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

В CSS3 можно задать несколько фоновых изображений (они как бы накладываются друг на друга как слои).

Задавая фон в виде картинки есть возможность настраивать так же ряд важных свойств CSS

background-repeat
background-attachment
background-position
background-size
background-clip

Рассмотрим в отдельности эти параметры

4.1. CSS background-repeat

Свойство CSS background-repeat определяет повторять ли фон. Можно отдельно настраивать повторение по вертикали и горизонтали.

Синтаксис CSS background-repeat

Где value может принимать следующие значения:

repeat-x — повторять фоновое изображение по горизонтали;
repeat-y — повторять фоновое изображение по вертикали;
no-repeat — не повторять фоновое изображение;
repeat (по умолчанию) — повторять фоновое изображение по горизонтали и вертикали;
space — все пространство заполняется максимально возможным количеством изображений, первое и последнее (по горизонтали и вертикали) поровну обрезаются;
round — аналогично предыдущему, с тем отличием, что первое и последнее масштабируются для заполнения;

Например, по горизонтали не повторять, по вертикали повторять фоновое изображение:

4.2. CSS background-attachment

Свойство CSS background-attachment задает привязки фона изображения. Можно зафиксировать задний фон, чтобы при прокрутке скроллом он не крутится или же наоборот фон будет прокручиваться вместе с сайтом.

Синтаксис CSS background-attachment

Где value может принимать следующие значения:

scroll (действует по умолчанию) — фон прокручивается вместе с сайтом;
fixed — при прокрутке скролла фон остается неизменными;
local — изображение прокручивается с контентом, но не с элементом, его содержащим;

Я думаю, что Вы видели такие сайты и понимаете о чем идет речь.

4.3. CSS background-position

Свойство CSS background-position задает расположение фона относительно левого верхнего угла.

Синтаксис CSS background-position

В параметрах мы указываем выравнивание (смещение) в пикселях или процентах сначала по оси Х, потом по оси У. value, value2 может принимать следующие значения:

top — выравнивание по верхнему краю;
left — выравнивание с левого края;
right — выравнивание с правого края;
bottom — выравнивание по нижнему краю;
center — выравнивание по центру;
число/проценты — можно задавать отступ в виде числа или процентов;

По умолчанию фон располагается в верхнем левом углу.

Можно указывать в пикселях Npx задание отступа от разных краев. Проще понять это на примере:

Фон будет выравнивать по правому краю со смещением 50 пикселей вниз.

Или например сместим фон на 100px вправо и расположим его по центру относительно высоты.

Все эти параметры можно задать в таблице стилей CSS. Этот параметр выравнивает расположение фона на странице.

4.4. CSS background-size

Свойство CSS background-size позволяет задавать размеры фона.

Синтаксис CSS background-size

Где первый параметр задает значение по оси Х, второй параметр по оси У. Можно задавать как в процентах, так и пикселях.

Так же может принимать два статичных параметра

contain — масштабирует изображение по длинной стороне (заполняет все пространство)
cover — масштабирует изображение по короткой стороне (заполняет все пространство)

Напоследок запишем все атрибуты вместе:

Для обращения к float из JavaScript нужно писать следующую конструкцию:

Используем jQuery

Идея очень проста, если коэффициент пропорциональности изображения (строчный элемент будет использоваться как фон) сопоставляется с коэффициентом пропорциональности окна браузера. Если для изображения он меньше, то нужно присвоить только свойству изображения значение 100%, и оно будет заполнять экран и по высоте и по ширине. А если больше, то присвоить только свойству изображения значение 100%.

<img src="images/bg.jpg" id="bg" alt="">

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

$(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+ (с заглушками, вероятно, будет работать и в IE6)
Во всех остальных браузерах.

Управление позицией фонового изображения

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

Значение	Описание
left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottom	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center»
x% y%	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%.
x y	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения.

Рассмотрим пример использования этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример позиционирования фонового изображения</title>
<style> 
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("smile_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /**/
width: 100px; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin: 10px; /* устанавливаем внешние отступы со всех сторон */
text-align: center; /* выравниваем текст по центру */
line-height: 60px; /* указываем высоту строки */
background-color: azure; /* задаем цвет заднего фона */
}
.leftTop {background-position: left top;} /* задаем позицию ключевыми словами */
.leftCenter {background-position: left center;} /* задаем позицию ключевыми словами */
.leftBottom {background-position: left bottom;} /* задаем позицию ключевыми словами */
.rightTop {background-position: right top;} /* задаем позицию ключевыми словами */
.rightCenter {background-position: right center;} /* задаем позицию ключевыми словами */
.rightBottom {background-position: right bottom;} /* задаем позицию ключевыми словами */
.centerTop {background-position: center top;} /* задаем позицию ключевыми словами */
.centerCenter {background-position: center center;} /* задаем позицию ключевыми словами */
.centerBottom {background-position: center bottom;} /* задаем позицию ключевыми словами */
.userPosition {background-position: 20px 75%;} /* задаем позицию по горизонтали в пикселях, а по вертикали в процентах */
</style>
</head>
	<body>
		<div class = "leftTop">left top</div>
		<div class = "leftCenter">left center</div>
		<div class = "leftBottom">left bottom</div>
		<div class = "rightTop">right top</div>
		<div class = "rightCenter">right center</div>
		<div class = "rightBottom">right bottom</div>
		<div class = "centerTop">center top</div>
		<div class = "centerCenter">center center</div>
		<div class = "centerBottom">center bottom</div>
		<div class = "userPosition">20px 75%</div>
	</body>
</html>

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

Результат нашего примера:

Рис. 117 Пример позиционирования фонового изображения.

Положение фона

Для управления положением фонового рисунка на странице применяется стилевое свойство background-position, оно одновременно устанавливает координаты изображения по горизонтали и вертикали. Чтобы отменить повторение фоновой картинки используется значение no-repeat. Также можно воспользоваться универсальным background, как показано в примере 4.

Пример 4. Положение фона

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Положение фонового рисунка</title>
<style>
body {
background: url(/example/image/tomato.jpg) right bottom no-repeat fixed; /* Параметры фона */
margin-right: 200px; /* Отступ справа */
}
</style>
</head>
<body>
<h1>Консервы из помидор</h1>
<p>Плоды отбирают с хорошей ровной окраской, плотные и однородные по
размеру, укладывают в банки и заливают кипящим рассолом (на 1 л воды — 35 г
поваренной соли и 6 г лимонной кислоты). Банки прикрывают крышками и
ставят на прогревание, выдерживая в кипящей воде: литровые — 5-8,
трехлитровые — 12-15 мин. Затем их укупоривают и охлаждают.</p>
<p>Примерный расход сырья и продуктов на литровую банку: помидоров
красных отборных — 550-600 г, соли — 15 г, лимонной кислоты — 3 г.</p>
</body>
</html>

Результат данного примера показан на рис. 5. Изображение позиционируется в нужном месте с помощью значений right bottom свойства background. Чтобы текст не отображался поверх рисунка, справа на странице добавлен отступ через margin-right.

Рис. 5. Фоновая картинка в правом нижнем углу окна

Точное положение фона задаётся с помощью пикселей, но в основном применяется процентная запись или ключевые слова, как показано ниже:

top left = left top = 0% 0% (в левом верхнем углу);
top = top center = center top = 50% 0% (по центру вверху);
right top = top right = 100% 0% (в правом верхнем углу);
left = left center = center left = 0% 50% (по левому краю и по центру);
center = center center = 50% 50% (по центру);
right = right center = center right = 100% 50% (по правому краю и по центру);
bottom left = left bottom = 0% 100% (в левом нижнем углу);
bottom = bottom center = center bottom = 50% 100% (по центру внизу);
bottom right = right bottom = 100% 100% (в правом нижнем углу).

Таким образом, для добавления фона в правый нижний угол для background-position можно указать значение right bottom или bottom right или 100% 100%. Они равнозначны и дают одинаковый результат.

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

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

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

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

/* разместите этот код последним */

@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;
    }
}

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

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

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

/* разместите этот код в разделе Subscribe */

#subscribe .pitch p {
    line-height: 1.6;
}

/* а этот — в теле медиазапроса для max-width: 480px */

#subscribe button {
    width: 232px;
    margin-top: 20px;
}

Цвет в HTML: Цвет фона

bgcolor означает «цвет фона». Многие цвета доступны с использованием соответствующих ключевых слов на английском языке.

В качестве альтернативы предпочтительнее использовать стиль CSS, так как цвет фона является эстетической особенностью страницы:

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

Статьи по теме

Техника с использованием только CSS. Часть #1.

Используем строчный элемент , размеры которого можно менять в любом браузере. Устанавливаем свойство , чтобы заполнить окно браузера вертикально, а свойству присваиваем значение 100% для заполнения по горизонтали. Также устанавливаем свойство равным ширине изображения, чтобы никогда оно не уменьшалось.

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

Вот код CSS:

img.bg {
        /* Устанавливаем правила для заполнения фоном */
        min-height: 100%;
        min-width: 1024px;

        /* Устанавливаем коэффициент пропорциональности */
        width: 100%;
        height: auto;

        /* Устанавливаем позиционирование */
        position: fixed;
        top: 0;
        left: 0;
}

@media screen and (max-width: 1024px) { /* Определяется свое для каждого конкретного изображения */
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}

Работает в:

Любой версии нормального браузера: Safari / Chrome / Opera / Firefox.
IE 6: Не работает — но можно использовать какой-нибудь из трюков для позиционирования.
IE 7/8: В большинстве случаев работает, не центрирует маленькие изображения, но заполняет экран правильно.
IE 9: Работает.

Удивительный, простой и прогрессивный метод CSS3

Задача легко решается с помощью CSS3 благодаря ставшему доступным свойству . Мы используем элемент (лучше, чем , так как он всегда имеет, по крайней мере, высоту окна браузера). Устанавливаем фиксированные и центрированный фон для него, а затем настраиваем размер с помощью присваивания свойству ключевого слова 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;
}

Работает в:

Safari 3+
Chrome
IE 9+
Opera 10+ (Opera 9.5 поддерживает свойство background-size, но без ключевых слов)
Firefox 3.6+

Добавление подложки в Майкрософт Ворд

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

Способ 1: Добавление стандартной подложки

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

Нажмите на кнопку «Подложка» и выберите подходящий шаблон в одной из представленных групп:

Заявление об ограничении ответственности;
Секретно;
Срочно.

Стандартная подложка будет добавлена в документ.

Вот пример того, как подложка будет выглядеть вместе с текстом:

Шаблонную подложку нельзя изменить, но вместо нее можно буквально в несколько кликов создать новую, полностью уникальную, О том, как это делается, будет рассказано далее.

Способ 2: Создание собственной подложки

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

Перейдите во вкладку «Дизайн» («Формат» в Word 2003, «Разметка страницы» в Word 2007 — 2010).
В группе «Фон страницы» нажмите на кнопку «Подложка».
Выберите в развернувшемся меню пункт «Настраиваемая подложка».
Ведите необходимые данные и выполните необходимые настройки в появившемся диалоговом окне.
- Выберите, что вы хотите использовать для подложки — рисунок или текст. Если это рисунок, укажите необходимый масштаб;
Если в качестве подложки вы хотите добавить надпись, выберите пункт «Текст», укажите используемый язык, введите текст надписи, выберите шрифт, задайте желаемый размер и цвет, а также укажите положение — горизонтально или по диагонали;

Нажмите кнопку “ОК”, чтобы выйти из режима создания подложки.

Вот пример настраиваемой подложки:

Решение возможных проблем

Бывает так, что текст в документе полностью или частично перекрывает собой добавленную подложку. Причина этого довольно проста – к тексту применена заливка (чаще всего именно белая, «незаметная»). Выглядит это примерно так:

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

Единственное решение в данном случае заключается в отключении этой самой заливки для текста. Делается это следующим образом

Выделите текст, который перекрывает собой подложку, нажав «CTRL+A» или воспользовавшись для этих целей мышкой.
Во вкладке «Главная», в блоке инструментов «Абзац» нажмите по кнопке «Заливка» и выберите в открывшемся меню пункт «Нет цвета».

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

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

Выделите текст, который перекрывает собой подложку (в нашем примере ниже таковым является второй абзац) и нажмите по кнопке «Очистить все форматирование», которая находится в блоке инструментов «Шрифт» вкладки «Главная».

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

Как же сделать меняющийся фон для сайта?

Начнем мы с того, что определим HTML структуру страницы, для которой делаем этот эффект:

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

Что касается стилей, то их здесь не очень много.

Делаем высоту блока на всю максимально возможную. То есть на высоту окна браузера пользователя.

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

В итоге у нас получится следующее меню:

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

Осталось для соответствующих блоков задать необходимые изображения:

Время для практического занятия

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-attachment</title>
  <style>
   body {
    background-image: url(https://gif1.mycdn.me/image?t=44&bid=835038013128&id=834515819819&plc=WEB&tkn=*UK1YYT8umKYaI0aL9yv8Q4ep3lo), url(http://picsfab.com/download/image/106992/6408x4272_goluboj-fon-s-belyimi-otbleskami-i-siyaniyami.jpg);
    background-attachment: fixed, scroll;    
    background-repeat: repeat-y, repeat-y;
    background-position: left, right;    
   }
div {
    width: 500px; 
    height: 1500px;
    background: white;
    margin-left: 600px;
    border: solid 1px blue; 
}
  </style>
 </head>
 <body>
  <div>
    <h1>Первый текст</h1>
  </div>
<div>
    <h1>Второй текст</h1>
  </div>
 </body>
</html>

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

Прочитано: 818 раз

Как сделать фон в виде цвета в CSS?

Для задания цвета фона мы можем использовать несколько форматов:

1.Кодовое название цвета

PHP

background:blue;

1 backgroundblue;
2.Шестнадцатеричный формат:

PHP

background:# 013C74;

1 background# 013C74;
3.Формат RGBA, позволяющий не только задавать цвет но и регулировать уровень прозрачности фона и таким образом сделать эффект прозрачного фона.

PHP

background:rgba(255,255,255,0.5);

1 backgroundrgba(255,255,255,0.5);

Уровень прозрачности задаётся в виде десятичного значения от 0 до 1, где 0 – полностью прозрачный, а 1 – не прозрачный.

Ранее я уже посвящала несколько статей теме задания цветов, их значений и определению цвета на сайте. Уверена, что они могут вам пригодиться. Вот ссылки:«Изменение цвета шрифта в CSS. Коды цветов HTML и CSS»«Как определить цвет на сайте»«Как в html изменить цвет текста?»

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

Резюме

Основные инструменты для задания фона веб-страниц

Для установки фонового изображения разработчиками веб-языков был предусмотрен атрибут background. Он имеется как в html, так и в css.

В языке разметки – это атрибут тега body, а в стилевых таблицах – универсальное свойство, которое позволяет задать до 5 характеристик заднего плана одновременно. Background – достаточно гибкий элемент, который можно использовать для задания фона в виде одного цвета, цветной картинки или даже анимации.

Однако заметьте! Если в виде фона вы хотите видеть однотонное полотно, заданное значением из палитры цветов, то это делается при помощи атрибута bgcolor.

Цвета в css и html задаются либо английским словом (например, red), либо специальным кодом, который состоит из знака # и шести символов после него (например, #FFDAB9).

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

Как сделать фон на сайте html

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

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

Лично я всегда выбираю такие шаблоны для сайта, чтобы ширина видимой части контента была не больше 1024 символов. Если посмотреть статистику сайта, то такое разрешение удовлетворяет большой процент пользователей. В будущем это число будет уменьшаться, т.к. новые мониторы с высоким разрешением вытесняют старые (например, full-hd есть почти у каждого).

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

Рассмотрим все варианты по заданию фона на сайте.

Объединение свойств

Можно получить тот же самый результат, что и в предыдущем примере, но с меньшим количеством строк кода. Для этого используется свойство background, которое позволяет установить значения свойств background-color, background-image, background-repeat, background-attachment, и background-position в объявлении всего одного свойства:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      body {
        background: white url('img_tree.png') no-repeat fixed right top;
        padding-right: 200px;
      }
    </style>
  </head>

  <body>

    <h1>Объединим свойства background в одно объявление!</h1>
    <p>Объединение нескольких свойств в одно может значительно сократить ваш CSS-код, 
    при этом никаких изменений во внешнем виде страницы не произойдет. Свойства, которые 
    возможно объединять в одно объявление, вы можете посмотреть в нашем справочнике по CSS.
	</p>

  </body>
</html>

Попробовать »

Зачем создавать фон страницы

Здравствуйте друзья! Майкрософт Офис Ворд имеет очень много функций, для редактирования текстов. В нём пишутся не только статьи, книги. Также различные посты с картинками и цветными фонами. Иногда, новички задают вопрос, как сделать фон в Ворде на всю страницу? На самом деле этот процесс простой.

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

О картинке на заднем фоне таблицы.

Нам понадобится код таблицы, в которой и будем ставить картинку на задний фон…И кроме таблицы, нам понадобится изображение, вообще любое, к примеру вот нам такое попалось под руку…

И код таблицы :

<table width=»140″ height=»140″. border=»1″
>
<tr>
<td> </td>
</tr>
</table>
Давайте выведем данную таблицу :

Добавляем свойство заднего фона…

background=»https://marrex.ru/foto/Game/Angry_Birds/Angry_Birds_for_WINDOWS_clip_image002.jpg»

Соберем весь код вместе:

<table width=»140″ height=»140″ border=»1″ >
<tr>
<td background=»//marrex.ru/__arhiv/updates/Site/Tablitsa/2020_10_12_09_22.jpeg»> </td>
</tr>
</table>

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

Для этого есть свойство :

background-size: cover

Его нужно поместить в атрибут style :

background-size: cover»

Новый код растянутой картинки на всю ширину и высоту таблицы:

<table width=»140″ height=»140″ border=»1″ >
<tr>
<td background=»//marrex.ru/__arhiv/updates/Site/Tablitsa/2020_10_12_09_22.jpeg» style=»background-size: cover»> </td>
</tr>
</table>

Смотрим результат растягивания картинки на всю ширину и высоту таблицы:

Как поменять фон на фото или картинке [простые способы]

HTML таблица цветов

Чтобы залить фон цветом

Таблицы с картинкой вместо фона: HTML примеры

CSS background-image — фоновая картинка на сайте

4.1. CSS background-repeat

4.2. CSS background-attachment

4.3. CSS background-position

4.4. CSS background-size

Используем jQuery

Управление позицией фонового изображения

Положение фона

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

Цвет в HTML: Цвет фона

Статьи по теме

Техника с использованием только CSS. Часть #1.

Удивительный, простой и прогрессивный метод CSS3

Добавление подложки в Майкрософт Ворд

Способ 1: Добавление стандартной подложки

Способ 2: Создание собственной подложки

Решение возможных проблем

Как же сделать меняющийся фон для сайта?

Время для практического занятия

Как сделать фон в виде цвета в CSS?

Резюме

Основные инструменты для задания фона веб-страниц

Как сделать фон на сайте html

Объединение свойств

Зачем создавать фон страницы

О картинке на заднем фоне таблицы.

Заключение