Подпишись на наши RSS Уроки по Фотошоп , просто щелкнув по иконке.


Новинка! Узнайте о Самом Результативном Способе Изучения Фотошопа, Без Посещения Дорогих Курсов, Без Черно-Белых Самоучителей и Без Метода Тыка!

10 Часов Практических Уроков Записанных с Экрана Монитора с Подробными Аудио-Комментариями сделают из Вас настоящего Учителя Фотошоп!

Подробнее..


Создаём новогоднюю поздравительную открытку
Создаём сложное выделение волос
Превращаем современную фотографию в старую
Создаём разноцветную светящуюся спираль
Наносим естественную татуировку в Фотошопе


Создание двойного фонового изображения


В данном уроке я покажу Вам как с помощью CSS создать эффект двойного фонового изображения.


Демо версия находится здесь. Файлы можно скачать тут.


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


Типичная техника растягивания



Эта часть изображения будет повторяться до полного заполнения страницы.


В нашем же примере нам понадобится фоновое изображение, которое будет повторяться и слева, и справа шапки. Как же достигнуть этого?


Техника двойного фонового изображения



Нам необходимо повторить оба рисунка (слева и справа) для достижения такого эффекта.


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


Эффект двойного фонового изображения


Решение состоит в использовании 2-х изображений, которые повторяются (одно для правой стороны и одно для левой).


HTML


Для повторяющегося изображения слева мы добавим фоновый рисунок к тегу <body>. Далее для решения проблемы с правой стороной мы добавим дополнительный слой <div>, который будет содержать второе фоновое изображение.


<div id="bg_wrap"></div> <!--Right-Side Repeating Background Image-->
<div class="container"> <!-- Container Class to center align and have a fixed width / The image header.gif is just as an example for placement -->
<img src="header.gif" alt="" />
</div>


CSS


body {}
Тут мы задаем фон для левой стороны


body {
margin: 0;
padding: 0;
background: #e5e5e5 url(bg_body.gif) repeat-x;
position: relative;
}


#bg_wrap {}
Далее мы создаем вторую половину, добавляя абсолютную позицию, которая будет прикреплена справа


#bg_wrap {
height: 96px;
width: 50%;
right: 0;
background: url(bg_wrap.gif) repeat-x;
position: absolute;
}


.container
Этот класс будет контейнером всего содержания. Здесь мы определяем ширину, цвет фона, выравнивание по центру и позицию 'relative'.


.container {
width: 960px;
background: #e5e5e5;
margin: 0 auto;
overflow: hidden;
position: relative;
}


Финальный код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Double Backgrounds with CSS - CSS/XHTML Tutorial by Soh Tanaka</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #e5e5e5 url(bg_body.gif) repeat-x;
position: relative;
}
#bg_wrap {
height: 96px;
width: 50%;
right: 0;
background: url(bg_wrap.gif) repeat-x;
position: absolute;
}
.container {
width: 960px;
background: #e5e5e5;
margin: 0 auto;
overflow: hidden;
position: relative;
}
</style>
</head>
<body>
<div id="bg_wrap"></div>
<div class="container">
<img src="header.gif" alt="" />
</div>
</body>
</html>


Вот и все готово! Удачи!


Данный урок подготовлен для Вас командой сайта http://ruseller.com




Если хотите не упустить данный урок, добавьте его в закладки:  

Хотите освоить весь Фотошоп с нуля?

Рекомендую Вам курс "Учитель Фотошопа в видеоформате", который состоит из 2-х частей: теоретической и практической. Все уроки даны в видеоформате с подробным озвучиванием всех выполняемых действий. Именно такой подход в изучении, позволит Вам в максимально короткие сроки овладеть всеми аспектами работы в Фотошоп.

Узнать подробнее

Рейтинг:     Добавлено: 2009-04-27    Просмотров: 3562    Сайт-источник: www.sohtanaka.com

Оцените урок: 1   2   3   4   5   6   7   8   9   10    



Комментарии (0)


Оставить комментарий:

Ваше имя:

Комментарий:

Введите число показаное на картинке (проверка от автороботов):

  


 

Рассылка - "Лучшие видеоуроки Фотошоп даром". Подписавшись на неё, Вы 2 раза в месяц будете получать на свой почтовый ящик, ссылки на лучшие уроки по работе в программе Adobe Photoshop совершенно бесплатно!

Лучшие уроки по Фотошопу 2 раза в месяц!

Ваше имя на русском: *
Ваш Email адрес: *

Подпишитесь сейчас и получите доступ к разделу "Лучшие уроки Фотошопа".


Если Вы давно мечтаете о создании собственного сайта на движке Drupal, то советую Вам обратить внимание на мой новый видеокурс "Drupal - Как создать профессиональный сайт с нуля". Это более 100 видеоуроков из которых Вы узнаете, как создать 4 сайта различной напрвленности, сложности и функционнальности.

Узнать подробнее


Вы можете сохранить созданный вами стиль слоя. Щелкните по кнопке New Style (Новый стиль) в диалоговом окне Layer Style. Введите имя нового стиля и нажмите кнопку OK. При следующем открытии диалогового окна Layer Style он будет указан последним в списке стилей.

Узнать больше


Внимание!
X
Хотите Получать 2 Видеоурока по Работе В Программе Фотошоп ЕЖЕМЕСЯЧНО?
Ваш e-mail: *
Ваше имя: *