Вставьте просто свою картинку "images/header.jpg" - как обычно, через тег img в HTML коде. А header2.jpg - как фон через CSS.
Разработка сайтов и программных модулей на MODX.
Опыт работы на MODx с 2005 года. Высокое качество.
Компания Baltic Design Colors:
http://www.bdcolors.ru.
Quote from: Volgar at Feb 28, 2009, 09:47 PM
Как можно это реализовать?
Например, вот так:
#top {
background:transparent url(../images/header2.jpg) repeat scroll left top;
height:300px;
margin:0 auto;
padding:0;
position:relative;
width:100%;
}
#top img {
left:0;
position:absolute;
top:0;
z-index:1;
}
#top h1 {
font-family:Century Gothic,georgia,helvetica,times,sans-serif;
font-size:35px;
font-weight:normal;
margin:0;
position:relative;
text-transform:uppercase;
z-index:100;
}
Т.е. таким образом создаем отсчет абсолютных значений от блока "top" для всех его дочерних элементов. Далее сдвигаем изображение в левый верхний угол абсолютным позиционированием. И после убираем наложение картинки на тег h1 с помощью z-index и относительным позиционированием тега h1.
P.S.: Да, и сдвиг блока вниз ("И сверху розовая полоса образовалась") исправился удалением отступов у h1, т.е. margin:0.
Разработка сайтов и программных модулей на MODX.
Опыт работы на MODx с 2005 года. Высокое качество.
Компания Baltic Design Colors:
http://www.bdcolors.ru.
-
- 103 Posts
Fuzzy - все просто супер! Спасибо.
Ещё маленький вопрос: а как же теперь картинку можно по центру выровнять?
-
- 103 Posts
А на разных разрешениях экрана разве это будет нормально выглядеть?
Съедет вправо.
-
- 349 Posts
ну вы бы хоть попробовали.. а то вопрос так поставлен как будто боитесь протестировать )
да и вообще как то трудно чтото предполагать когда не видишь конкретного примера.. есть ссылка?