Урок 2. Фоновое изображение и работа с ним.

На этом уроке мы будем работать с фоновыми изображениями в CSS и их свойствами.

Задача №1.

Дано:

body{
  background-image:url(imaige.gif);
  background-color:red;
  color:yellow;
}

1)Для каких целей был написан код?

2)Какие свойства задаёт данный код для выбранного элемента?

Усложняем задачу.

Задача №2.

Дано:

body{
  background-image:url(imaige.gif);
  background-repeat:no-repeat;
  background-color:red;
  color:yellow;
}

Вопрос по задаче:

1)Какие свойства задаёт данный код для выбранного элемента?

Добавляем новый элемент в задачу.

Задача №3.

Дано:

body{
  background-image:url(imaige.gif);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-color:red;
  color:yellow;
}

Вопрос по задаче:

1)Какие свойства задаёт данный код для выбранного элемента?

Усложним задачу.

Задача №4.

Дано:

body{
  background-image:url(picture.gif);
  background-repeat:no-repeat;
  background-color:red;
  background-position:15% 40%;
  color:yellow;
}

Вопросы по задаче:

1)Какое свойство добавилось в данный код для выбранного элемента?

2)Как влияет добавленное свойство на фоновое изображение?

Общие вопросы по уроку:

1) Какие ещё Вы знаете элементы повторения для изображения?

2) Какой вид повторения задаётся по умолчанию для фонового изображения?

3) Какие ещё Вы знаете виды повторения для изображения и как они влияют на него?

4) Какие ещё бывают виды фиксирования изображения? Как они влияют на изображение?

5) Как ещё можно позиционировать фоновое изображение? Какими единицами его можно задавать?

На этом наш урок закончен.

Ждём Ваших ответов! Всем удачи! До встречи на следующих уроках!

Поделиться...