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

Статус
В этой теме нельзя размещать новые ответы.
Dark Wizard

Dark Wizard

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

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

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

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

И всего две строчки
 
Два div-а на всю ширину с position:relative и разными (но не отрицательными - Лиса не понимает) z-index.
 
А почему тебе не подходит одна картинка? Ложим ее и "растягиваем" яваскриптом в зависимости от разрешения экрана.
Готовое решение можешь посмотреть допустим здесь(работает под ИЕ 6 - 7, Мурзилкой, Оперой нормально:(

Для просмотра ссылки Войди или Зарегистрируйся

Итак все, что надо:
яваскрипт:
Код: 
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">
.........................
Делаешь бэкграунд одной картинкой и растягиваешь его за таблицей с помощью яваскрипта на любом разрешении.
 
Может так?

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>
 
В общем поискал поискал, и понял что самый простой способ всё же через таблицы вот так:

<style>
.fonone {
background-image: url('images/white_left_top.jpg');
background-repeat: no-repeat;
background-position: left top;
}
.fontwo {
background-image: url('images/white_right_top.jpg');
background-repeat: no-repeat;
background-position: right top;
}
.fonthree {
background-image: url('images/white_right_bottom.jpg');
background-repeat: no-repeat;
background-position: right bottom;
}
</style>


<td class="fonone" valign=top><table cellspacing="0" cellpadding="10" width=100% height=100% class="fontwo"><tr><td valign=top class="fonthree" height="790" width=100%>
Нажмите для раскрытия...
 
а так? у меня работает в 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>
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху