Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Свидетельство о публикации

Автоматическая выдача свидетельства о публикации в официальном СМИ сразу после добавления материала на сайт - Бесплатно

Добавить свой материал

За каждый опубликованный материал Вы получите бесплатное свидетельство о публикации от проекта «Инфоурок»

(Свидетельство о регистрации СМИ: Эл №ФС77-60625 от 20.01.2015)

Инфоурок / Информатика / Конспекты / Лекционный и практический материал по теме "Фоновое изображение с помощью CSS"
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 28 июня.

Подать заявку на курс
  • Информатика

Лекционный и практический материал по теме "Фоновое изображение с помощью CSS"

библиотека
материалов

Практическая работа №1
Фоновое изображение

Задание 1


h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
hello_html_m61741b20.png


Задание 2

Создайте в Corol Draw фон, с градиентной заливкой, сохраните как изображение 'gradient2.png'. Вставьте как фоновое изображение.

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
hello_html_m36293808.png


Задание 3

Вставить фоновое изображение сначала справа, а затем слева, изменив изображение и отступ.


body
{
background-image:url('girl.jpg');
background-repeat:no-repeat;
background-;
;
}

hello_html_6161d8f1.png


Задание 4

Зафиксировать фоновое изображение с помощью свойств
background-repeat:no-repeat;
background-attachment:fixed;


hello_html_732fe6d8.png

А потом изменить, чтобы изображение не прокручивалось.


Задание 5

Создайте документ, где будет применено повторение изображения для абзаца.

<p style="background-image:url(64.gif); height:100px; border:#FF0000 solid 1px;"> Изображение является фоновым изображением данного абзаца p>

hello_html_4f6f1be3.png


Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Краткое описание документа:

Свойство CSS background используется для форматирования фона элементов html.

Вы можете изменять следующие свойства CSS:

·  background-color

·  background-image

·  background-repeat

·  background-attachment

·  background-position

Цвет фона

Свойство background-color определяет цвет фона элемента.

Фон страницы указывается в селекторе body:

Пример

body {background-color:#b0c4de;}

Цвет фона может быть указан с помощью:

·       названия цвета, например, "red" (красный)

·       значения RGB, например, "rgb(255,0,0)"

·       шестнадцатиричного кода цвета, например, "#ff0000"

В примере ниже элементы h1, p и div имеют разные цвета фона:

Пример

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

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

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

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

Фоновое изображение для всей страницы можно задать так:

Пример

body {background-image:url('paper.gif');}

Повторение фонового изображения

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

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

Пример

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Для того, чтобы повторять изображение по вертикали, надо заменить значение repeat-x на repeat-y.

Позиционирование фонового изображения и отмена повторения

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

Для того, чтобы фоновое изображение отображалось только один раз, значение свойства background-repeat должно иметь следующее значение:

Пример

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Для изменения положения фонового изображения на странице используется свойство background-position:

Пример

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

Краткая запись свойств фона

Для сокращения кода css вы можете записать все свойства фона одной записью. Все значения фона, записываются в одном свойстве, называемом "background":

Пример

body {background:#ffffff url('img_tree.png') no-repeat right top;}

При краткой записи соблюдайте порядок указания свойств:

·  background-color

·  background-image

·  background-repeat

·  background-attachment

·  background-position

 

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

Автор
Дата добавления 10.03.2015
Раздел Информатика
Подраздел Конспекты
Просмотров229
Номер материала 435953
Получить свидетельство о публикации
Похожие материалы

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