Как сделать картинку фоном
Содержание:
- Удивительный, простой и прогрессивный метод CSS3
- Таблицы с картинкой вместо фона: HTML примеры
- Вставляем картинку на фон из шаблонов
- Изменяем цвет фона с помощью атрибута BACKGROUND.
- Популярные статьи:
- Добавление на страницу картинки (используем тег )
- HTML элемент
- Основные инструменты для задания фона веб-страниц
- Техника с использованием только CSS. Часть #2.
- Как же сделать меняющийся фон для сайта?
- Меняем задний фон у видео
- Обтекание (выравнивание) картинки текстом.
- Написание общих стилей
- Завершение
- Изменяем цвет фона с помощью атрибута BGCOLOR.
- Резюме
- Фиксация фонового изображения
- Цвет фона и настройки экрана
- Как сделать фон в CSS?
- Статьи по теме
- Положение фона
- Способы растягивания фоновой картинки на ширину окна
- Как сделать фон в виде картинки в CSS?
- Заключение
Удивительный, простой и прогрессивный метод 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+
Таблицы с картинкой вместо фона: 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). После просмотра видим, что фон появляется только в тех ячейках, в которых мы прописали, а не во всей таблице.
Вставляем картинку на фон из шаблонов
В программе PowerPoint любого варианта ПО есть уже готовые шаблоны, или, как они точнее называются — текстуры.
Для того, чтобы сделать картинку фоном в презентации PowerPoint из данных вариантов, необходимо произвести следующие действия:
Сперва после открытия программы PowerPoint выбираем вкладку «Вид». Здесь вы обнаружите группу под наименованием «Режим образцов» и уже в ней необходимо выбрать пункт «Режим слайдов».
Перед вами снова открывается окно форматирования и среди пунктов открываем «Заливка». Здесь уже следует поставить отметку рядом с «Рисунок или текстура». Фон страницы вашей презентации сразу же изменится на установленную по умолчанию текстуру.
Для того, чтобы установить уже готовое изображение, предлагаемое презентацией, выберите в пункте «Текстура» Через стрелку то, что необходимо вам.
Изменяем цвет фона с помощью атрибута BACKGROUND.
Атрибут BACKGROUND тоже размещается в теге <body>. С помощью этого атрибута вы сможете сделать картиночный фон. Формат картинки берите jpg или gif. Разрешение картинки можно брать от 12х12 пикселей и больше.
Если фоновая картинка размещена вместе с HTML файлом, это будет выглядеть так:
<bоdy baсkground=»fon.gif»>
Если фоновая картинка размещена в папке images, это будет выглядеть так:
<bоdy baсkground=»images/fon.gif»>
Вот пример:
<html> <head> <title>Заголовок страницы</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body background="fon.gif" text="black"> Текст страницы, таблицы, картинки, музыка и видео. </body> </html>
Результат:
Или вот так:
<html> <head> <title>Заголовок страницы</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body background="images/fon.gif" text="#000000"> Текст страницы, таблицы, картинки, музыка и видео. </body> </html>
Вот и все.
Теперь вы знаете, как изменить или задать цвет фона. Пробуйте закрепить урок, поменять значение, поэкспериментируйте.
Спасибо, что посетили блог BlogGood.ru. Удачи!!!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 Март 2013
Прокомментировано:90
просмотров: 312382 -
Размеры форматов листов А0 – А7
Дата: 23 Январь 2013
Прокомментировано:3
просмотров: 260733 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 Ноябрь 2014
Прокомментировано:5
просмотров: 186181 -
Установка windows 7 на ноутбук
Дата: 18 Декабрь 2012
Прокомментировано:169
просмотров: 181098 -
Как включить или отключить Aero в Windows 7
Дата: 1 Июнь 2013
Прокомментировано:6
просмотров: 152594
Добавление на страницу картинки (используем тег )
Подготовьте и поместите в файл картинки. Для примера, пусть это будет изображение окна браузера — (скачать), которое поместите в нашу обозначенную папку:
Рис. 2. Файл «brauzer.jpg»
Откроем и найдём в нём следующее:
Код 2. Место для вставки картинки
И рядом (или вместо этого кода) добавим HTML подготовленной картинки:
Код 3. Код картинки — тег
Должно получиться следующее:
Рис. 3. Тег картинки в коде
То есть — это необходимый HTML, который нужно разместить на web-странице, чтобы вместо него отобразилась картинка.
Для настройки в основном используют следующие атрибуты:
- — атрибут для указания адреса изображения. Это может быть, как относительный адрес (относительно папки (раздела на сайте)) (как в нашем примере — ), так и абсолютный адрес вашего сайта или любого другого ресурса (например, )
-
и — ширина и, соответственно, высота картинки в пикселях. В я указал оригинальные размеры изображения, но можно указать и меньшие или бо́льшие.
При этом, конечно же, при указании бо́льших размеров, картинка будет терять в качестве, а при задании меньших (если размеры уменьшены не пропорционально) — искажаться, вписываясь в указанные параметры.
Обычно разработчики задают оригинальные размеры, а далее, при необходимости, меняют картинки как угодно с помощью каскадных стилей CSS (стилизацию рассмотрим ).
-
— альтернативное название. Оно отображается вместо картинки, если у пользователя отключен показ графики на страницах, а также воспроизводится многими интернет-читалками (скринридерами).
Кроме того, данный атрибут считывают поисковые системы, чтобы точнее распознавать изображения.
- — всплывающая подсказка при наведении мышью на изображение. Если нет явной необходимости, то данный параметр веб-мастерами часто не используется.
После того как добавили HTML-код изображения (не забыв положить в папку саму картинку), давайте откроем наш файл «index.html» и посмотрим, что получилось:
Рис. 4. Результат вставки изображения (пока без стилизации)
HTML элемент
HTML5 представляет элемент чтобы добавить больше гибкости при указании ресурсов изображения.
Элемент содержит ряд элементов , каждый из них ссылается на разные источники изображений. Таким образом, браузер может выбрать изображение, которое лучше всего соответствует текущему виду и/или устройству.
Каждые элементы имеют атрибуты, описывающие, когда их изображение является наиболее подходящим.
Пример
Показывать разные изображения на разных размерах экрана:
<picture> <source media=»(min-width: 650px)» srcset=»img_food.jpg»>
<source media=»(min-width: 465px)» srcset=»img_car.jpg»> <img src=»img_girl.jpg»></picture>
Примечание: Всегда указывайте элемент как последний дочерний элемент . Элемент используется браузерами, которые не поддерживают элемент , если ни один из них тег совпадает.
Основные инструменты для задания фона веб-страниц
Для установки фонового изображения разработчиками веб-языков был предусмотрен атрибут background. Он имеется как в html, так и в css.
В языке разметки – это атрибут тега body, а в стилевых таблицах – универсальное свойство, которое позволяет задать до 5 характеристик заднего плана одновременно. Background – достаточно гибкий элемент, который можно использовать для задания фона в виде одного цвета, цветной картинки или даже анимации.
Однако заметьте! Если в виде фона вы хотите видеть однотонное полотно, заданное значением из палитры цветов, то это делается при помощи атрибута bgcolor.
Цвета в css и html задаются либо английским словом (например, red), либо специальным кодом, который состоит из знака # и шести символов после него (например, #FFDAB9).
При наборе второго варианта в специализированных программных продуктах для разработчиков, палитра автоматически появится перед вами. Если же вы только начали изучать данные веб-языки, то код цвета можно подсмотреть в интернете.
Техника с использованием только CSS. Часть #2.
Другой способ решить задачу — поместить строчный элемент на странице, зафиксировать его положение в левом верхнем углу и установить значение 100% для его свойств и , сохраняя коэффициент пропорциональности.
<img src="images/bg.jpg" id="bg" alt="">
#bg {
position:fixed;
top:0;
left:0;
/* Сохраняем коэффициент пропорциональности */
min-width:100%;
min-height:100%;
}
Однако так изображение не центрируется. Поэтому обернем изображение в элемент . Данный будет иметь ширину в два раза больше окна браузера. Изображение, помещенное в него, будет сохранять пропорции и полностью покрывать окно браузера, размещаясь точно в центре.
<div id="bg"> <img src="images/bg.jpg" alt=""> </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 отказываются работать с данным способом (неправильное позиционирование изображения).
Как же сделать меняющийся фон для сайта?
Начнем мы с того, что определим HTML структуру страницы, для которой делаем этот эффект:
В теге мы определили навигацию по блокам с разными изображениями. На этом с HTML разметкой закончили. Переходим к стилям.
Что касается стилей, то их здесь не очень много.
Делаем высоту блока на всю максимально возможную. То есть на высоту окна браузера пользователя.
Дальше разбираемся с навигацией, которая отображается справа в виде кружочков (если находимся на активном блоке, то кружок закрашен).
В итоге у нас получится следующее меню:
Далее необходимо написать стили чтобы изображения не повторялись и были зафиксированы. Делаем это с помощью следующих свойств:
Осталось для соответствующих блоков задать необходимые изображения:
Меняем задний фон у видео
❶
Выбор и подготовка основного видео
Во-первых, основное видео (у которого мы будем менять фон) необходимо записать специальным образом: задний фон должен быть однотонным (например, зеленым, синим, белым и т.д.).
Во-вторых, крайне желательно, чтобы фон не пересекался с цветами одежды и волос того, кто записан на этом видео. Чтобы было наглядно видно, что нужно получить — я привел один кадр из видео ниже.
Скрин из интервью
Длина видео, формат сжатия, и пр. моменты — не так важны (в большинстве случаев, программе-редактору все равно, что кодировать).
❷
Выбор ПО, создание проекта
Для решения текущей задачи я буду использовать видеоредактор для начинающих — Видео-Монтаж» (ссылка на офиц. сайт). Кстати, не смотря на свой простой интерфейс, этот редактор позволяет делать удивительные вещи!
Собственно, после запуска редактора — выберите в меню задачу «Хромакей». См. пример ниже на картинке.
Удобная замена одноцветного фона
❸
Выбор основного видео и нового фона
В первом же шаге программа попросит указать основное видео (с однотонным фоном). Просто укажите его и нажмите «Далее».
Выбираем нужное видео
После, нужно указать новый фон: т.е. тот фон, который заменит наше однотонное полотно. В качестве такого фона можно взять либо какую-нибудь картинку, либо другое видео (в нашем примере указана картинка со средневековым замком).
Выбираем новый фон (может быть картинкой или видео)
❹
Замена фона: смешивание, растворение
Теперь видео-редактор попросит вручную указать фон, который будет заменен (на основном видео). В нашем примере это зеленое полотно, именно его и указываем.
Указываем цвет фона
Далее программа автоматически удалит тот цвет, который вы указали и подставит новый фон. Нам же в этом шаге нужно:
- задать размер и положение главного действующего лица;
- «до-настроить» параметры смешивания и допуска (от этого зависит резкость, яркость, качество совмещения и пр. параметры).
Когда всё будет размещено идеально (так, как требуется) нажмите «Далее».
Настраиваем смешивание и растворение одного объекта над другим
❺
Обрезка видео (опционально)
Теперь можно обрезать видео по длине. Например, это часто требуется для начала и концовки ролика (когда в кадр попадают какие-нибудь приготовления или посторонние люди…). В общем-то, шаг не обязательный — можно и не выполнять…
Обрезаем видео при необходимости
❻
Добавление музыки (при необходимости)
Если вы хотите наложить доп. тематическую музыку — просто нажмите на «Плюсик» в левом меню окна и выберите нужную композицию. Кстати, несколько заготовок под разные проекты уже есть в самом редакторе, возможно они вас устроят…
Накладываем музыку (при необходимости)
❼
Сохранение полученного видео
Ну и последний штрих — сохранение полученного видео. Если вы делаете видео для просмотра на ПК, ТВ и пр. — рекомендуется выбрать формат AVI или MP4 (HD-видео).
Кстати, «Видео-Монтаж» на этапе сохранения позволяет указать не только кодек и разрешение кадра, но и вручную задать битрейт (причем, заранее сообщая вам итоговый размер видео!). Согласитесь, это весьма удобно, если вам видео нужно уместить на флешку или компакт-диск…
Выбор формата и качества ролика
❽
Результат
В общем-то, после кодирования видео — его можно открыть в любом плеере (я использовал стандартный, встроенный в Windows). Как видите, изображение в целом получилось достаточно яркое, сочное, и на первый взгляд для неискушенного пользователя всё выглядит вполне реалистично — как будто сняли на самом деле в замке…
Было — стало
На этом у меня сегодня всё…
Ни пуха ни пера!..
Обтекание (выравнивание) картинки текстом.
float
Как сделать в CSS так, чтобы на странице изображение обтекало текстом? Выравнивание картинки в CSS аналог HTML-выравнивания картинки <IMG align=”right” …>, вот только в CSS по какой стороне будет выравнивание элементов определяет float.
float: left | right | none;
Значение:
left — выровнять картинку по левому краю, текст обтекает его по правой стороне.
right — выровнять картинку по правому краю, текст обтекает по левой стороне.
none — выравнивание и обтекание не задается (значение по умолчанию).
Пример
<html>
<head>
<title>Обтекание</title>
<style>
.leftimg {
float:left; /* Выравнивание по левому краю */
margin: 5px 5px 5px 0; /* Отступы вокруг картинки */
}
.rightimg {
float: right; /* Выравнивание по правому краю */
margin: 5px 0 5px 5px; /* Отступы вокруг картинки */
}
</style>
</head>
<body>
<h2>Основы CSS</h2>
<p><img src="images/1.jpg" class="leftimg">
Приветствую всех читателей и случайных посетителей моего блога.
Сегодня я бы хотел вам рассказать о незаменимом инструменте веб-дизайнера - CSS.
CSS (Cascading Style Sheets) – это каскадные таблицы стилей, которые хранят в
себе правила для группы или одиночного элемента. CSS используют для изменения
внешнего вида дизайна сайта (цвет, размер текста, фон и др.).</p>
<h2>Основы CSS</h2>
<p><img src="images/2.jpg" class="rightimg">
Давайте перейдем к основам CSS.CSS файл имеет расширение *.css.
Часто веб-мастера присваивают CSS файлу имя style (style.css).
CSS файл тесно связан с HTML. Другими словами, это можно объяснить
так: CSS без HTML работать не будет.
Предлагаю для общего понимания рассмотреть пример, как можно объединить
HTML с CSS файлом.</p>
</body>
</html>
Здесь я указал отступы текста от картинки
margin: 5px 0 5px 5px;
Результат:
Написание общих стилей
Для начала определим те стили, которые будут использоваться повсеместно. Сюда входит основной шрифт и фон страницы, размеры блока-контейнера, вид ссылок, общие стили заголовков, адаптивность картинок, форма и цвет кнопок. Добавьте этот код в таблицу , разместив его под комментарием :
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 {
background-image: linear-gradient(145deg, #ff3670, #dd0000);
}
Как вы могли заметить по макету, дизайн нашей страницы планируется в темных тонах. Белого фона не будет ни у одного элемента, поэтому мы сразу устанавливаем темно-серый фоновый цвет для всего элемента , а вторым фоном добавляем изображение с легкой текстурой. При этом цвет шрифта мы выбираем светлый, чтобы можно было без проблем разглядеть текст.
Настройки для блока остаются идентичны стилям в предыдущем лендинге.
Стандартный подчеркнутый стиль для ссылок нам не нужен, поэтому мы отключаем его, а также меняем цвет с классического синего на белый. А текст всех заголовков, встречающихся на странице, мы делаем прописными буквами. Заголовкам добавляем отступы сверху и снизу (поскольку стандартные отступы обнулил файл Reset.css), задаем размер шрифта и выравниваем по центру.
Все изображения на странице мы делаем адаптивными с помощью приведенного выше кода, чтобы они автоматически подстраивались под размеры экрана, при этом не теряя своих пропорций.
Для тегов и ссылок с классом мы создали общий стиль, поскольку оба вида элементов должны выглядеть в нашем дизайне одинаково. Мы убрали рамку, которую дорисовывает браузер всем кнопкам, а также применили градиентный фон — вот и первый случай использования функции на практике. При наведении на кнопку цвета градиента меняются местами.
Все остальные свойства CSS вы уже видели много раз, поэтому мы думаем, что вы легко поймете, за что они отвечают в данном коде. Что ж, двигаемся дальше!
Завершение
Поздравляем, вы только что создали еще одну настоящую адаптивную веб-страницу! Вы можете пойти дальше и преобразить ее по своему вкусу. Придумайте и добавьте новые секции, стилизуйте их, используя свои навыки. Кроме этого, можно создать еще несколько веб-страниц и объединить их с помощью ссылок — получится полноценный многостраничный сайт музыкальной группы!
Если в процессе прохождения урока у вас что-то не получилось, не отчаивайтесь — готовый проект, как всегда, включен в архив с файлами, так что вы можете заглянуть в него и разобраться, в чем проблема.
А вот и демо-версия готовой страницы:
На этой ноте мы завершаем практический урок, а также текущую главу учебника. Спасибо за участие, и оставайтесь с нами: впереди вас ждет следующая глава, которая посвящена вещам, без которых не обойдется ни один сайт — ссылки и навигация. И первый урок посвящен такой теме как состояние ссылок в CSS.
Изменяем цвет фона с помощью атрибута BGCOLOR.
При помощи атрибута BGCOLOR, который тоже размещается в теге <body>, можно задать цвет фона HTML страницы.
Цвет задается в виде цифрового кода:
<body bgcolor=»#000000″>
или обычным названием цвета:
<body bgcolor=»green»>
Вот пример:
<html> <head> <title>Изменяем цвет фона с помощью атрибута BGCOLOR</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body bgcolor="#000000" text="green"> Текст страницы, таблицы, картинки, музыка и видео. </body> </html>
Результат:
Или вот так:
<html> <head> <title>Заголовок страницы</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body bgcolor="green" text="#000000"> Текст страницы, таблицы, картинки, музыка и видео. </body> </html>
Результат:
Резюме
Фиксация фонового изображения
Вы наверное не раз заходили на сайты, на которых задний фон остается на месте, а содержимое страницы прокручивается как бы над ним. Этот эффект достигается с помощью свойства background-attachment, которое определяет, должно ли фоновое изображение оставаться на одном месте или оно будет прокручиваться вместе с остальным содержимым веб-страницы.
Так как по умолчанию задний фон прокручивается вместе с содержимым, то в качестве примера мы зафиксируем наше фоновое изображение на одном месте с помощью значения fixed:
body {
background-image: url('image.png');
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Попробовать »
Цвет фона и настройки экрана
Поскольку нет способа узнать, какая видеокарта у пользователя (или как он ее установил), веб-дизайнеры давно ссылаются на «безопасную палитру» из 256 цветов, на которую пользователь, безусловно, способен дисплей. Это называется безопасная веб- палитра.
Однако следует сказать, что подавляющее большинство компьютеров настроено отображать как минимум тысячи цветов, поэтому использование «безопасной веб-палитры» уже не так строго необходимо (это было в первые годы существования Интернета).
PunBB.INFO → HTML / CSS → CSS плавно меняющийся фон background
You must login or register to post a reply
Как сделать фон в CSS?
Как я уже писала выше мы можем использовать разные варианты задания фона и для всех их нам понадобится свойство background с разными значениями. Для того чтобы его использовать нам нужно сделать следующее:
-
1.В HTML коде присвоить элементу, для которого мы хотим задать цвет определённый класс или использовать атрибут style. Мне больше нравится вариант с классом, поэтому в первую очередь покажу его.
PHP
<div class=»block»>Это блок, для которого нужно сделать фон</div></li>
1 <div class=»block»>Этоблок,длякоторогонужносделатьфон<div><li> -
2.В файле, в котором вы задаёте CSS стили для вашего сайта, нужно дописать для этого класса свойство background с нужным значением фона.
PHP
.block {
background:#ccc;
}1
2
3.block{
background#ccc;
}
Если не знаете где и как подключить CSS или хотите дописать CSS стили прямо в HTML, то вам может понадобится эта статья:«Как css подключить к html?»
Статьи по теме
Положение фона
Для управления положением фонового рисунка на странице применяется стилевое свойство 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%. Они равнозначны и дают одинаковый результат.
Способы растягивания фоновой картинки на ширину окна
Представим наш экран в процентном виде. Получается, что вся ширина и длина экрана будет составлять 100% х 100%. Нам необходимо растянуть картинку на эту ширину. Добавим к записи изображения в файл style.css строку, которая и будет растягивать изображение на всю ширину и длину монитора. Как это записывается в CSS стиле? Все просто!
body
{
background: url(Images/Picture.jpg’)
background-size: 100%; /* такая запись подойдет для большинства современных браузеров */
}
Вот мы и разобрали, как сделать картинку фоном в html на весь экран. Есть еще способ записи в файле index.htm. Хоть этот метод и устаревший, но для новичков необходимо его знать и понимать. В теге (head)(style) div { background-size: cover; } (/style) (/head) эта запись означает, что мы выделяем специальный блок для фона, который будет позиционироваться по всей ширине окна. Мы рассмотрели 2 способа, как сделать фон сайта картинкой html, чтобы изображение растягивалось на всю ширину экрана в любом из современных браузеров.
Как сделать фон в виде картинки в CSS?
Для этого нам нужно будет:
- 1.К себе на сайт в определённую папку с картинками загрузить изображение, которое мы хотим использовать в качестве фона.
-
2.Задать его в CSS
PHP
background:url(images/bg.jpg);
1 backgroundurl(imagesbg.jpg);
В скобочках указываем путь к картинке.
Путь указывается относительно файла CSS, в котором вы пишете это свойство.
Так же если изображение у вас небольшое то будьте готовы увидеть такую картину:
Вы можете отключить повторение фона для маленьких изображений, дописав no-repeat:
PHP
background:url(images/bg.jpg) no-repat;
| 1 | backgroundurl(imagesbg.jpg)no-repat; |
Так же можно сделать чтобы он повторялся только по горизонтали:
PHP
background:url(images/bg2.jpg) repeat-x;
| 1 | backgroundurl(imagesbg2.jpg)repeat-x; |
Или только по вертикали:
PHP
background:url(images/bg2.jpg) repeat-y;
| 1 | backgroundurl(imagesbg2.jpg)repeat-y; |
Кроме того мы можем управлять расположением фонового изображения для элемента. Для этого нам нужно дописать следующе:
- top – для выравнивание по верхнему краю
- bottom — для выравнивания по нижнему краю
- left – выравниваем по левому краю
- right – по правому
- center – выравниваем по центру (можно использовать как для выравнивания по горизонтали так по вертикали)
Так же можно сочетать эти выравнивания.
PHP
background:url(images/bg2.jpg) no-repeat top center;
| 1 | backgroundurl(imagesbg2.jpg)no-repeat top center; |
