Evgeny Pavlov

Недавно делал сайт, который содержит в середине всего лишь одну фотографию, края у которой закруглены, на полосатом фоне:

Всё было бы легко, если фотография была бы небольшого размера (не более, чем 640×480) — я бы просто её отцентровал и больше бы не парился. Но нет так-то всё просто: фотография размером почти 1280×800 и при этом её нельзя ужимать, (поставив в качестве ширины, например, 100%), так как должны сохраниться оригинальные размеры.

Если такую фотографию просто разместить на сайте, то для маленьких мониторов тут же появятся полосы прокрутки, поэтому я решил сделать её фоном, размещённым по центру:

div#splash {
	position:absolute;
	z-index:2;
	background: url('/images/splash.jpg') 50% 50% no-repeat;
	width:100%; height:100%;
}

Всё получилось: я разместил и полосатый фон, и изображение-фотографию. Но ведь у фотографии края закруглены, а это означает, что в этом месте у изображения должен быть либо полосатый фон, либо прозрачность, через которую виден основной фон — вот в этом и была основная проблема. Во-первых, у JPEG нет прозрачности, и ставить фон в краях оказалось нецелесообразным, так как он попросту мог не совместиться с основным фоном. Во-вторых, можно было попробовать использовать PNG-24, но из-за большого размера и из-за плохой совместимости с IE6 и это решение было отвергнуто. В итоге прошлось немного извращаться поэкспериментировать с фоном: я создал очень большой (3000×3000) полосатый фон в формате GIF с прозрачным отверстием посередине, вставил ещё туда текст и стал его использовать в качестве основного:

div#wrap {
	position:absolute;
	z-index:3;
	background: transparent url('/images/bg.gif') 50% 50%;
	width:100%; height:100%;
}

А фотографию сохранил в JPG без всяких закруглений:

Проставил z-index в двух этих слоях, где у фона был наибольший, поэтому фактически всё получилось:

Вот такое трюк я и сделал на elinalipona.eu. Этот сайт прекрасно отображается на различных мониторах:

Метки: background, GIF, JPEG, Вёрстка, фон, фотография