We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 31782
    • 103 Posts
    Подскажите как сделать в резиновом шаблоне, чтобы в шапке была большая фоновая картинка, но для пользователей с большим разрешением нужно вставить далее картинку с таким же цветом шириной в 1 пиксел и повторить её столько раз сколько нужно.

    Вот мой стиль шапки. Картинка первая header.jpg, а вот вторую, например header2.jpg, как можно вставить?
    #top {
    	margin:0 auto;
    	padding:0px;
    	height:300px;
    	background:url(../images/header.jpg) top left; 
    	width:100%;
    	}

    • Вставьте просто свою картинку "images/header.jpg" - как обычно, через тег img в HTML коде. А header2.jpg - как фон через CSS.
        Разработка сайтов и программных модулей на MODX.
        Опыт работы на MODx с 2005 года. Высокое качество.
        Компания Baltic Design Colors: http://www.bdcolors.ru.
        • 31782
        • 103 Posts
        Спасибо, Fuzzy.
        Дело в том, что мне для СЕОшных нужд требуется чтобы имя сайта ещё в самом верху дублировалось. Хотел сделать на фоне картинки, чтобы в глаза не бросалось. Даже место на картинке сверху оставил. А теперь картинка съехала вниз. И сверху розовая полоса образовалась...
        http://www.virtual-fortune-teller.com/

        <div id="top" align="center">
        <h1>[(site_name)]</h1>
        <img src="assets/templates/Potpourri/images/header.jpg"/>
        </div>


        Как можно это реализовать?
        • 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.
            • 31782
            • 103 Posts
            Fuzzy - все просто супер! Спасибо.
            Ещё маленький вопрос: а как же теперь картинку можно по центру выровнять?
              • 22532
              • 349 Posts
              #top img {
              left:50%;
              margin-left:-(тутполшириныкартинки)px;
              position:absolute;
              top:0;
              z-index:1;
              }
              

              как то так...
                • 31782
                • 103 Posts
                А на разных разрешениях экрана разве это будет нормально выглядеть?
                Съедет вправо.
                  • 22532
                  • 349 Posts
                  ну вы бы хоть попробовали.. а то вопрос так поставлен как будто боитесь протестировать )
                  да и вообще как то трудно чтото предполагать когда не видишь конкретного примера.. есть ссылка?
                    • 31782
                    • 103 Posts
                    Quote from: p4sh0k at Mar 01, 2009, 03:48 PM

                    ну вы бы хоть попробовали.. а то вопрос так поставлен как будто боитесь протестировать )
                    да и вообще как то трудно чтото предполагать когда не видишь конкретного примера.. есть ссылка?
                    http://www.virtual-fortune-teller.com/
                      • 22532
                      • 349 Posts
                      мдя..........
                      меня глючит или header2.jpg тупо красный квадрат huh если да то... lol
                      в чем проблема написать

                      #top {
                      	margin:0;
                      	padding:0;
                      	height:260px;
                      	background: #5E0501 url(header.jpg) center bottom no-repeat;
                      	}


                      и без всяких релативов и абсолютов вставить текст вверху
                      только определитесь с его длиной.. ибо он не умещается на всю ширину и у меня если сделать меньше 1280 не убирается в экране и идет поверх картинки