Масштабируемый фон \ Изображение + контент

[Demi0n]

Масштабируемый фон + контент

Приветствую!

Может кто то подскажет:

Задача сделать страницу с Масштабируемым фоновым изображением,

но скорее всего это будет просто картинка в теге IMG.

т.е. Чтобы чтобы в зависимости от разрешения, изображение тянулось на ВСЮ

видимую область экрана.

Поверх изображения будет меню.

А ниже этого изображения , с отступом 50px; – Контент.

Таким образом входит что при загрузке страницы на весь экран выводиться необходимое изоражение,

а затем с меню или прокруткой ниже контент.

———————————————————————————-- ————-

Это пример Изображения с отступами от краев:

http://nooshu.com/explore/scalable-background/

Изображение буду тянуть плагином – jQuery Plug-in: Scalable Background Image

http://nooshu.com/jquery-plug-in-scalable-background-image/

———————————————————————————-- ————-

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

потомучто Либо картинка перекрывает собой Контент, либоконтент поверх картинки.

Еще думал использовть min-height: Npx; – но не знаю как .. и поможет ли ...

[Clayton]

Надо же чего напридумывали) я бы обошелся простым body {background:url(best-wedding/img) no-repeat 50% 0;}

Ну не будет по вертикали тянуться, да... а сильно надо ли?)

А в Вашем случае наверное можно попробовать исправить ситуацию позиционированием, position: relative; z-index:; и так далее...

Edited October 26, 2010 by Clayton

[Demi0n]

Ситуация в том.. что это не должен быть Фон))

Структура либо:

header

wrapper

wrapper-bg

content

Либо Изображение (в котором header + wrapper-bg) + контент..ниже изображения на 50px

СМЫСЛ в том чтобы изображение было на всю видимую область страницы,

а с прокруткой ниже БЛОК КОНТЕНТА!

[Clayton]

Оно вроде Вы так, понятно объясняете, но ничего без картинок и примеров непонятно)

[tt48]

http://beavers-net.narod.ru/primers/abitur2010.html

-- похоже, нет?

[Demi0n]

ИЗВИНИТЕ, если не так что то объяснил...

ПРИМЕР, БЕЗ МАСШТАБА!

http://tools.gavick.com/newshowpro.html

tt48, ВСЕ Верно , похоже, но если вы присмотритесь,

то увидите в вашем примере , что картинка больше по высоте видимой области экрана,

и имеет белый фон, на котором мало заметны все огрехи ...

[tt48]

ИЗВИНИТЕ, если не так что то объяснил...

ПРИМЕР, БЕЗ МАСШТАБА!

http://tools.gavick.com/newshowpro.html

tt48, ВСЕ Верно , похоже, но если вы присмотритесь,

то увидите в вашем примере , что картинка больше по высоте видимой области экрана,

и имеет белый фон, на котором мало заметны все огрехи ...

Ну... это уже мелочи...неприятные, но мелочи,)

http://beavers-net.narod.ru/primers/abitur2011.html

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

Это уже ближе не к физической верстке, а к визуальной, так скажем...как мне кажется,)

Удачи.

[Demi0n]

сейчас изучу ....

СПАСИБО..

нЕ ПОНИМАЮ ПОЧЕМУ ГОРИЗОНТАЛЬНАЯ ПРОКРУТКА ЕСТЬ ...

Edited October 26, 2010 by Demi0n

[tt48]

сейчас изучу ....

СПАСИБО..

нЕ ПОНИМАЮ ПОЧЕМУ ГОРИЗОНТАЛЬНАЯ ПРОКРУТКА ЕСТЬ ...

Если Вы про мой пример - там яндекс свою рекламу приделал,

она не влазит, вот и прокрутка.

Опера позволяет изменять код налету - ctrl+u и вперед.

Сильно убыстряет процесс.

[Demi0n]

Контейнер в котором контент,

поясните , пожалуйста - top:100%;

	.outer{
		z-index  : 12;
		position : absolute;
		top:100%;
		width:100%;
		clear: both;
		border   : 1px solid #ddd;
	}

А второе .. это то что прокрутка все равно остается.. я убрал банеры яндекс..

[tt48]

Контейнер в котором контент,

поясните , пожалуйста - top:100%;

	.outer{
		z-index  : 12;
		position : absolute;
		top:100%;
		width:100%;
		clear: both;
		border   : 1px solid #ddd;
	}

А второе .. это то что прокрутка все равно остается.. я убрал банеры яндекс..

top:100% Для того, чтобы контент был ниже растянутой на весь экран (100% высота) картинки

- вроде бы логично...наверное.

Скролл - не вижу его.. есть самая малость - это красный бордер у картинки плюс может еще у кого.

IE8, Opera10, FF4, Chrome.

Картинка обрезается как надо только при задании absolute для содержащего её блока.

[Demi0n]

top:100% Для того, чтобы контент был ниже растянутой на весь экран (100% высота) картинки

ЭТО Я Сообразил, СПРОСИЛ НА ВСЯКИЙ .. НЕ СТАЛ КОММЕНТИРОВАТЬ

Скролл - во всех браузерах ... не понимаю почему ..

Не обращайте внимание на мои боковые панели .. без них тоже самое ...

____________________________

Вы знаете, самое удивительное, что я делал почти так же как у вас в примере\\

С Абсолютным позиционированием \ 100% - растягивал изображение и тд ...

Но .. почему то либо картинка обрезалась ..оставалось 10\20px до футера либо перекрытие фона\контента... Может потому что плагин пытался использовать который указан в начале ...

_______________

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

Нашел сегодня интересный блоГ резиновых колонок ..

Edited October 27, 2010 by Demi0n

[tt48]

Скорее всего плагин пытался сохранить пропорции и она не вмещалась.

Про скролл - уберите бордеры,их даже на картинке видно.

(уже убрал- можно смотреть))

Edited October 28, 2010 by tt48

[Demi0n]

ДЕЛО НЕ В БОРДЕРАХ!

И даже если они есть.. картинка вместе с бордерами должна вписываться без скролла

Edited October 28, 2010 by Demi0n

[tt48]

ДЕЛО НЕ В БОРДЕРАХ!

И даже если они есть.. картинка вместе с бордерами должна вписываться без скролла

Какой интересный...он у меня просто скролл не рисует. Косяк.

Убрал бордер у outer и скролла больше нет. Совсем нет.

Можно было и мозгой пошевелить немного.

[Demi0n]

о чем то таком догадывался...

Edited June 3, 2013 by Demi0n

[Demi0n]

Я не знаю почему ...

Но опять отступ от футера ..

точнее между картинкой и футером где то 10 с плюсом PX; .\\

В чем причина не понимаю ... не менял ничего только вот сел верстать

__________

В Вашем примере ничего не меняется..

но как только меня картинку (1200*800) ... обрезает ее

Edited November 1, 2010 by Demi0n