Точное позиционирование картинки на веб-странице

В ряде случаев веб-мастера при создании сайтов или верстке веб-страниц и шаблонов сталкиваются с ситуацией, когда необходимо точно поместить картинку в нужном месте страницы так, чтобы совместить ее с изображением заднего фона. К примеру, мы имеем рисунок дизайна главной страницы сайта и на этом рисунке есть такой фрагмент:

Фрагмент рисунка дизайна страницы.

Нам нужно «разрезать» этот рисунок на отдельные картинки и сделать его точную копию на странице создаваемого сайта. Внимательно присмотревшись к фрагменту дизайна, мы видим, что:

1. Задний фон состоит из повторяющегося фрагмента, поэтому его можно вырезать отдельно и сделать фоном тега div или td.
2. Логотип имеет сзади полупозрачную, плавно исчезающую тень, поэтому его нельзя вырезать ровно по краю, а придется захватить часть заднего фона.

В результате мы получим две картинки:

Картинка 1. Задний фон.	Картинка 2. Логотип с частью заднего фона.

Теперь нам необходимо поместить их на страницу сайта и совместить с точностью до пикселя. Есть масса способов как это сделать:

1. Сделать таблицу и порезав ее на ячейки, пытаться совместить края картинки 2 с фоном;
2. С помощью однопиксельного прозрачного gif файла можно отодвинуть картинку 2 вниз и вправо;
3. Вместо прозрачного gif файла можно использовать поля образованные с помощью тега div;
4. И так далее...

Можно придумать довольно много вариантов реализации подобной задачи, но я хочу предложить вам самый, на мой взгляд, простой и эффективный способ точного позиционирования картинки внутри какого-либо тега. Он заключается в прописывании внутри тега img стиля, в котором мы задаем смещение картинки сверху и слева. Html код картинки будет выглядеть вот так:

Фоновое изображение пустим, к примеру, по тегу div, хотя можно и по tr - это кому как нравиться. В результате получаем:

Вот как это все будет выглядеть:

Совмещенные картинки фона и логотипа.

Все прекрасно и замечательно - картинка точно попадает туда, где ей и положено быть, что нам и требуется.

Используя этот способ, для точного позиционирования картинки нужно всего лишь изменить значения padding-left (отступ картинки слева) и padding-top (отступ картинки сверху).

Теперь несколько важных замечаний:

1. Следует иметь ввиду, что тег, внутри которого будет помещена картинка, должен, либо иметь жестко заданную высоту и ширину (с помощью width и height), либо картинка должна быть «прилеплена» к верхней и левой стороне тега (в теге td это делается с помощью valign и align). В идеале лучше сделать и то и другое.
   Если этого не делать, то картинка может «съезжать» со своего места в зависимости от окружающих тегов, окружающего текста и картинок. Вы, возможно, видели такие сайты, у которых при переходе от страницы к странице графика начинает «разъезжаться».
2. В примере, описанном выше, стили помещены внутри тегов. Это совсем не обязательно и сделано лишь для наглядности. В принципе, их можно вынести в отдельный CSS файл таблицы стилей.

Вот собственно и вся премудрость. Как вы сами видите, ничего сложного в этом способе нет, но поставленную задачу он выполняет прекрасно.

Желаю Вам удачи и успехов в веб-программировании!