Фоновые изображения

Дата добавления: 2015-07-09; просмотров: 402; Нарушение авторских прав

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

body {

background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;

}

Это включает в себя следующие свойства:

- background-color, определяет цвет фона.

- background-image, которое представляет собой местонахождение самого изображения.

- background-repeat, которое указывает, как изображение повторяется. Это может быть repeat — фактически эквивалент эффекта «мозаики» по всему фону;repeat-y — изображение повторяется по координатной оси Y, т.е. сверху и снизу;repeat-x — изображение повторяется по координатной оси X, т.е. следует одно за другим слева на право; no-repeat — изображение показывается только один раз и не повторяется.

- background-position, показывает расположение изображения. Это может быть top (сверху), center (по центру), bottom (снизу), left (слева), right (справа) или любая благоразумная их комбинация.

Пример 3

<html>

<head>

<title>My first CSS page</title>

<style type="text/css">

body {

background-color: #FFCC66;

background-image: url("20596825170e.jpg");

background-repeat: no-repeat;

background-attachment: fixed;

}

h1 {font-size: 30px; font-family: arial}

h2 {font-size: 15px; font-family: courier}

p {font-size: 8px; font-family: times new roman}

</style>

</head>

<body>

<h1>My first CSS page</h1>

<h2>Welcome to my first CSS page</h2>

<p>Here you can see how CSS works </p>

</body>

</html>

<== предыдущая лекция	\|	следующая лекция ==>
Комментарии в CSS	\|	Задание 1