Выравнивание background'а
Допустим есть ячейка в таблице. Мне нужно поставить фон в эту ячейку так, чтобы картинка оказалась бы в нижнем правом углу ячейки, но не в самом углу, а с отступом от него, к примеру, в 10 пикселей. Нужно реализовать это именно через css, а не с помощью доп. таблицы, помещенной внутрь ячейки.
Т.е., к примеру, я могу поставить фон в ячейку с отступом в 10px от верхнего левого угла
Могу поставить фон в ячейку в нижний правый угол БЕЗ отступа
А вот как поставить фон в нижний правый угол С ОТСТУПОМ от него - не понимаю.
Отсчитать нужное кол-во пикселей от верхнего левого угла не поможет, т.к. ячейка может менять размеры в зависимости от разрешения экрана монитора.
Заранее спасибо.
Т.е., к примеру, я могу поставить фон в ячейку с отступом в 10px от верхнего левого угла
Код:
<TD style="background:url(/mybg.gif) 10px 10px no-repeat">
Могу поставить фон в ячейку в нижний правый угол БЕЗ отступа
Код:
<TD style="background:url(/mybg.gif) right bottom no-repeat">
А вот как поставить фон в нижний правый угол С ОТСТУПОМ от него - не понимаю.
Отсчитать нужное кол-во пикселей от верхнего левого угла не поможет, т.к. ячейка может менять размеры в зависимости от разрешения экрана монитора.
Заранее спасибо.
Используйте свойство background-position:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
table {
width: 150px;
height: 150px;
background-color: silver;
}
td {
width: 150px;
height: 150px;
background: url('http://forum.codenet.ru/image.php?u=20318&dateline=1162378417') no-repeat;
background-position: 90% 90%;
}
-->
</style>
</head>
<body>
<table summary="">
<tr>
<td></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
table {
width: 150px;
height: 150px;
background-color: silver;
}
td {
width: 150px;
height: 150px;
background: url('http://forum.codenet.ru/image.php?u=20318&dateline=1162378417') no-repeat;
background-position: 90% 90%;
}
-->
</style>
</head>
<body>
<table summary="">
<tr>
<td></td>
</tr>
</table>
</body>
</html>
[QUOTE=Silence]Используйте свойство background-position[/QUOTE]
Спасибо, но это тоже самое, что и:
Проблема в том, что при увеличении размера ячейки фоновая картинка отодвигается от нижнего правого угла в соответствии с 90%, а мне надо сделать, чтобы в независимости от размеров ячейки фоновая картинка ВСЕГДА бы отстояла от нижнего правого угла на одинаковое кол-во пикселей.
Спасибо, но это тоже самое, что и:
Код:
<TD style="background:url(/mybg.gif) 90% 90% no-repeat">
Проблема в том, что при увеличении размера ячейки фоновая картинка отодвигается от нижнего правого угла в соответствии с 90%, а мне надо сделать, чтобы в независимости от размеров ячейки фоновая картинка ВСЕГДА бы отстояла от нижнего правого угла на одинаковое кол-во пикселей.
Ну и в чем проблема то? Вместо процентов задай точное значение в пикселях.
