Урок 13. Работа с изображениями. Часть 2

Здравствуй, уважаемый читатель.

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

Перед изучением данного урока пройдите предыдущие уроки:

Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Урок 7. Рамки
Урок 8. Оформление списков
Урок 9. Наследование
Урок 10. Блочная модель
Урок 11. Высота и ширина блока
Урок 12. Конфликты полей
Урок 13. Работа с изображениями. Часть 1

Теория и практика

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

Позиционирование фона

При вставке изображения на фон блока его можно расположить так, как вам необходимо. Рассмотрим на примере:

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="content">
        <div id="block1"><h2>Love block</h2> Пример текста для блока.</div>
        <div id="block2"><h2>Wink block</h2> Пример текста для второго блока.</div>
    </div>
</body>
</html>

А на заднем фоне разместим изображение:

#content{
    width:800px; /* ширина блока div, в котором находятся все элементы */
    margin:0 auto; /* располагаем данный блок по центру */
}
 
#block1{
    border:1px solid #cc0000; /* красная граница */
    width:200px; /* ширина блока */
    background-image: url('images/love.png'); /* изображение на фон */
    background-repeat:no-repeat; /* запрещаем повтор фонового изображения */
    background-position:150px 5px; /* позиционируем фоновое изображение */
    padding:0 5px 10px 10px; /* внутренние отступы */
    text-align:justify; /* растягиваем текст по всему блоку */
    float:left; /* обтекание слева для блока */
}
 
#block1 h2{
    color:#cc0000;  /* цвет текста у тега h2 в блоке div id='block1'*/
}
 
#block2{
    border:1px solid #cc0000; /* красная граница */
    width:200px; /* ширина блока */
    background-image: url('images/;).png');  /* изображение на фон */
    background-repeat:no-repeat; /* запрещаем повтор фонового изображения */
    background-position:150px 5px;  /* позиционируем фоновое изображение */
    padding:0 5px 10px 10px; /* внутренние отступы */
    text-align:justify;/* растягиваем текст по всему блоку */
    margin-left:230px; /* отступ слева для данного блока, т.к. у того свойство float = left */
}
 
#block2 h2{
    color:#cc0000; /* цвет текста у тега h2 в блоке div id='block2'*/
}

Как это выглядит в браузере:

Скриншот:

Реальный пример:

Посмотреть пример Скачать

Сейчас рассмотрим как происходит позиционирование фонового изображения более подробно. Мы в CSS написали

1	background-position:150px 5px; /* позиционируем фоновое изображение */

Что значат эти две цифры: Первая — это позиция по горизонтали, вторая — по вертикали.(Верхний левый угол это 0% 0%. Правый нижний — 100% 100%. Если Вы оставите только одну цифру, вторая автоматом будет 50%)