- 22 Апреля 2009 10:03
Виталий
Спасибо! То, что надо. - 22 Апреля 2009 16:01
Евгений
Тут разница в объеме шапки. Через этот урок Вы уменьшите размер шапки в несколько раз по сравнению с jpg шапкой во всю длинну. - 24 Апреля 2009 00:59
magazila
А я не понял, что этот урок даёт? - 14 Мая 2009 21:02
Игорь_Ермаков
Я однажды ужасно извращался таким методом с сложной шапкой, нужно было сделать её в процентах, я нарезал её на 9 кусочков, причём 5 из них были тиражируемыми текстурами. :-D Получилось забавно ) - 14 Мая 2009 21:03
Игорь_Ермаков
magazila, посмотрите демо через оперу и уменьшите страницу до 20% тогда поймёте - 14 Ноября 2009 18:24
yudahin
ребята подскажите как сделать чтоб сайт раскрывался на весь монитор, например как на этом сайте??? вот мой mail yudahin_07@mail.ru - 23 Марта 2010 15:15
DENSTUP
yudahin, посмотри ссылку, покопайся в коде и подумай, что нужно сделать для полноэкранности сайта. :) http://upyachla.ru/test.html всё очень просто. 1сайт сделай на дивах или в таблицах пропиши width="100%" 2в теге body сделай topmargin="0" leftmargin="0" rightmargin="0" - 20 Мая 2010 08:50
DENSTUP
yudahin, вот другой вариант посмотри http://www.linedmk.com/primers/css/hablon3k.html - 26 Апреля 2011 16:06
Tankizzzt
DENSTUP спасибо бальшое!!!! я сам не допер чтобы маргины прописать, все я думал чего второе изображение с отступом - 12 Мая 2011 21:13
maxwell
Урок интересный только у меня не получилось создать вот эту как бы волну. Две картинки с разных сторон заполняют страницу а как натыкаются друг на друга в середине стоят как вкопанные(((и получаются два больших прямоугольника в шапке сайта((Подскажите пожалуйста что делаю не так?- 5 Ноября 2013 12:46
usava
Краткость не всегда сестра таланта'">
- Метки урока:
- фон
- изображения
- css
Создание двойного фонового изображения
В данном уроке я покажу Вам как с помощью CSS создать эффект двойного фонового изображения.
Данный урок был подготовлен американским блоггером www.SohTanaka.com. Оригинал находится здесь.
![]() |
По просьбе автора исходники были удалены с наших серверов. Демо версия доступна для просмотра на сайте автора.
Обычно при создании растягиваемого фонового изображения с помощью 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>
Вот и все готово! Удачи!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.sohtanaka.com
Перевел: Максим Шкурупий
Урок создан: 22 Апреля 2009
Просмотров: 46534
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.
Рената