Большая фотография

[Чудной Лис]

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

Всё работает на IE6, FF2, O9, на других не проверял.



Идея состоит вот в чём. Как бы мы ни старались, фотография всё равно не будет видна на главной - там показывается пересжатая уменьшенная копия. Поэтому мы её меняем на прозрачную, которая и весит мизер, и не видна А настоящую нашу картинку мы указываем фоном для этой области. Единственно, необходимо указывать значение высоты (выделена жирным) для каждой картинки отдельно. В моем случае для картинки высотой в 280пх использовано значение 260пх.



1. В качестве фотографии нам нужно закачать прозрачную, вот такую:

2. А также, ннам понадобится картинка, которую мы хотим вместо фотографии.

3. Вводим такой код:



#thisDiaryInfo

{

background:url('путь к картинке на замену');

background-repeat:no-repeat;

background-position:top 100%;

}

#thisDiaryPhoto

{

height: 260px;

}

Comments

[~Takanori]

Не знаю чо у меня не работает, но у меня не работает, все вставляю, все правильно, но картинку не отображает....

[Лиситз]

тоже самое. Картинка пуста!

[Лиситз]

поняла почему не отображается, но не смогла разрешить проблему

Вот эта строчка:
url('путь к картинке на замену')

После того как нажимаешь "сохранить"
Слетает к черту.
В чем дело не могу понять. Получается вот такая фигня:

.menuSection {text-align:center;}
#thisDiaryInfo { background:;background-repeat:no-repeat;background-position:top 100%; background-position: 50% 50%;}
#thisDiaryPhoto{height: 260px;}

[Касатик]

Две проблемы: картинка не прозрачная, хотя уверена, что делаю все правильно, второе: фон отображаться не хочет.... Вот код: #thisDiaryInfo { background:url('/userdir/6/6/8/0/668092/42472766.png'); background-repeat:no-repeat; background-position:20px 0px; }
#thisDiaryPhoto { height: 450px;width:250px; position:fixed !important; top:0px !important; left: 20px !important;}
Помогите пожалуйста...