Как разместить 2 картинки фоном в таблице? CSS

Тема в разделе "Другие языки", создана пользователем Dark Wizard, 7 янв 2008.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. Dark Wizard

    Dark Wizard

    Регистр.:
    23 сен 2007
    Сообщения:
    157
    Симпатии:
    76
    Как, используя css разместить 2 картинки по углам в таблице, чтобы они были фоном (картинки - 2 уголка). И чтобы как можно меньше кода?

    У меня таблица для того, чтобы растягиваться на весь экран. По уголкам надо вставить 2 картинки, фоном. Одна картинка не подходит - потому что размер динамический у таблицы. Вариант с 3-мя таблицами с 3 фонами также не подходит. .
     
  2. duomax

    duomax Постоялец

    Регистр.:
    27 ноя 2006
    Сообщения:
    93
    Симпатии:
    15
    а вариант с двумя картинками?
    можно сделать в таблице два столбца, оба по 50%
    в левом фон слева, в правом - справа.
    все это взять в div с параметром position: absolute

    а поверх всего этого уже разместить все что касается сайта

    Добавлено через 1 минуту
    А, вот еще.
    Если у тебя просто маленькие уголки, то можно еще проще,
    используя два дива, опять же с position:absolute в начале страницы - сразу после body.
    один див по левому ровняй а другой по правому краям

    И всего две строчки
     
  3. DimAce

    DimAce Создатель

    Регистр.:
    4 май 2007
    Сообщения:
    11
    Симпатии:
    6
    Два div-а на всю ширину с position:relative и разными (но не отрицательными - Лиса не понимает) z-index.
     
  4. Black#FFFFFF

    Black#FFFFFF

    Регистр.:
    19 июл 2007
    Сообщения:
    176
    Симпатии:
    103
    А почему тебе не подходит одна картинка? Ложим ее и "растягиваем" яваскриптом в зависимости от разрешения экрана.
    Готовое решение можешь посмотреть допустим здесь(работает под ИЕ 6 - 7, Мурзилкой, Оперой нормально:(

    http://hstt.com.ua/

    Итак все, что надо:
    яваскрипт:
    Код:
    function apply_bg()
    {
      var img, X, Y;
    
      if (document.all)
      {
        img = document.getElementById('bg_image');
        X = Math.max(document.body.clientWidth,  document.body.scrollWidth);
        Y = Math.max(document.body.clientHeight, document.body.scrollHeight);
      }
      else
      {
        img = document.getElementById('bg_image');
        X = Math.max(window.innerWidth,  document.width );
        Y = Math.max(window.innerHeight, document.height);
      }
    
      img.width  = X;
      img.height = Y;
      var n_table=document.getElementById("table");
      n_table.width=img.width;
      n_table.height=img.height;
    }
    css:
    Код:
    .table{
               position: relative;
               top                :   0;
               left               :   0;
               }
    
    
               .background{
               position: absolute;
               top:0;
               left: 0;
               }
    
    html:
    Код:
    <body onload ='apply_bg()' onResize='apply_bg()'>
    <div>
    
    <img id='bg_image' src='img/background.jpg' class="background">
    
        <table id="table" width="100%" height="100%" 
    class="table">
    .........................
    
    Делаешь бэкграунд одной картинкой и растягиваешь его за таблицей с помощью яваскрипта на любом разрешении.
     
  5. nopase

    nopase Создатель

    Регистр.:
    6 май 2007
    Сообщения:
    49
    Симпатии:
    22
    Может так?

    HTML:
    <div style="background:url(1.gif) no-repeat left top">
    <table border="0" style="background:url(1.gif) no-repeat right top" width="100%">
    <tr><td height="25">
    	абырвалг
    </td></tr>
    </table>
    </div>
     
    aleksey246 нравится это.
  6. Dark Wizard

    Dark Wizard

    Регистр.:
    23 сен 2007
    Сообщения:
    157
    Симпатии:
    76
    В общем поискал поискал, и понял что самый простой способ всё же через таблицы вот так:

     
  7. mentanos

    mentanos Постоялец

    Регистр.:
    27 дек 2007
    Сообщения:
    128
    Симпатии:
    35
    а так? у меня работает в ie9, opera8.5, fox1.

    Код:
    <head><style>
    #leftcut {
        position: absolute;
        left: 0;
        top: 0;
        z-Index: 80001;
    }
    #rightcut {
        position: absolute;
        right: 0;
        top: 0;
        z-Index: 80001;
    }
    #main {
    	position: absolute;
    	left: 0;
    	top: 0;
    	width: 100%;
    	height: 100%;
    	z-index: 80002;
    }
    </style></head>
    <body>
    <div id=leftcut><img src='leftcut.jpg' width=172 height=79 /></div>
    <div id=rightcut><img src='rightcut.jpg' width=172 height=79 /></div>
    <div id=main>
    EVERYTHING HERE
    </div>
    </body>
    
     
Статус темы:
Закрыта.