Jump to content
  • 0

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


Demi0n
 Share

Question

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

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

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

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

но скорее всего это будет просто картинка в теге 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; – но не знаю как .. и поможет ли ...

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

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

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

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

Edited by Clayton
Link to comment
Share on other sites

  • 0

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

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

header

wrapper

wrapper-bg

content

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

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

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

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

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

Удачи.

Link to comment
Share on other sites

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

СПАСИБО..

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

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

поясните , пожалуйста - 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 для содержащего её блока.

Link to comment
Share on other sites

  • 0

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

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

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

622678e1b845.jpg

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

____________________________

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

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

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

_______________

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

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

Edited by Demi0n
Link to comment
Share on other sites

  • 0

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

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

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

Edited by tt48
Link to comment
Share on other sites

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

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

ae2d4de296fa.jpg

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

__________

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

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

Edited by Demi0n
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy