Резиновое изображение реально?

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем griboff, 30.12.2009.

  1. Offline

    griboff Недавно здесь

    Регистрация:
    17.12.2009
    Сообщения:
    6
    Симпатии:
    0
    Пол:
    Мужской
    Хочу сделать резиновый шаблон при помощи css и div контейнеров, но возникла проблема с изображением,
    мне надо вставить изображение в верхний средний контейнер во всю его ширину чтоб рисунок не копировался при изменение разрешения, а растягивался. Можно ли так сделать?
     
  2.  
  3. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    griboff,
    background-repeat:no-repeat;
     
  4. agruts
    Offline

    agruts Russian Joomla! Team

    Регистрация:
    01.03.2006
    Сообщения:
    612
    Симпатии:
    21
    Пол:
    Мужской
    griboff, можно, но сам рисунок растягиваться не может, придется делать два вложенных дива и два изображения, которые при наложении друг на друга образуют одно целое, без шва.
    При изменении разрешения один див имеет фиксированную ширину, а второй относительную.
    Див с фиксированной шириной находится вверху, поэтому при растяжении, нижний какбы выезжает влево:
    Код (html):
    1. <style>
    2. div#1 {
    3.     width:100%;
    4.     height:50px;
    5.     background-image:url(../1.png);
    6.     background-position:left top;
    7.     background-repeat:no-repeat;
    8.     float:left;
    9. }
    10. div#2 {
    11.     width:950px;
    12.     height:50px;
    13.     background-image:url(../2.png);
    14.     background-position:right top;
    15.     background-repeat:no-repeat;
    16.     float:right;
    17. }
    18.    
    19. </style>
    20.  
    21. <div id="1">
    22.     <div id="2">
    23.     </div>
    24.  </div>

    наложите 2 листа бумаги друг на друга и потяните нижний влево - сразу будет наглядно видно как это работает
     

Поделиться этой страницей

Загрузка...