Авто-подгон фона под разрешение экрана пользователя

Статус
Закрыто для дальнейших ответов.
Царя

Царя

Well-Known Member
Регистрация
27.01.2012
Сообщения
55
Всем привет, я начинающий нупо-веб-мастер, пытаюсь разработать сайт на конкурс "школоты"(сам школяр), дизайн вроде более менее, но боюсь, что если начнут проверять при разных расширениях - фон меня подведет... Можете посоветовать как сделать Авто-подгон фона под разрешение экрана пользователя?
 
lekzd

lekzd

parse error: parse error, unexpected T_STRING...
Регистрация
17.02.2011
Сообщения
1 125
А вот нечего увлекаться динамическим фоном если контент на месте
Берете широкую текстуру фона и центрируете по горизонтали
 
Царя

Царя

Well-Known Member
Регистрация
27.01.2012
Сообщения
55
lekzd сказал(а):
А вот нечего увлекаться динамическим фоном если контент на месте
Берете широкую текстуру фона и центрируете по горизонтали
Нажмите, чтобы раскрыть...
Немного тебя не понял, в смысле динамический фон? Он статический(фиксированный)... Вообщем залил в интернет... посмотри пжалста http://pheonix-pw.ru (не смотри на домен, другого свободного у меня не было)

Знаю, работа совсем не идеальна, я только учусь :)
зато все сам... с нуля...
 
Царя

Царя

Well-Known Member
Регистрация
27.01.2012
Сообщения
55
Тема все еще актуальна, жду ваших ответов ^^
 
Царя

Царя

Well-Known Member
Регистрация
27.01.2012
Сообщения
55
я не очень дружу с английским... можно рассказать по русски, о чем там?
Спасибок не жалко....
 
Jackito

Jackito

Designer
Регистрация
28.01.2011
Сообщения
289
я не очень дружу с английским... можно рассказать по русски, о чем там?
Спасибок не жалко....
Нажмите, чтобы раскрыть...
Откройте страницу ДЕМО и посмотрите исходный код. Там и английский не понадобится.
но так вроде в опере не показывает... а мне надо совместимость хотя бы с мозилой, сафари, оперой и хромом
Нажмите, чтобы раскрыть...
все везде "показывает"
 
Царя

Царя

Well-Known Member
Регистрация
27.01.2012
Сообщения
55
Jackito сказал(а):
я не очень дружу с английским... можно рассказать по русски, о чем там?
Спасибок не жалко....
Нажмите, чтобы раскрыть...
Откройте страницу ДЕМО и посмотрите исходный код. Там и английский не понадобится.
но так вроде в опере не показывает... а мне надо совместимость хотя бы с мозилой, сафари, оперой и хромом
Нажмите, чтобы раскрыть...
все везде "показывает"
Нажмите, чтобы раскрыть...
там нужны знания явы, не так ли? ^^
дай пожалуйста ссылку где про нее можно почитать)
 
Царя

Царя

Well-Known Member
Регистрация
27.01.2012
Сообщения
55
BaNru

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 145
Ну а разве по двум ссылкам, выше представленным, не выдает в числе первых javascript.ru?
 
Light

Light

Member
Регистрация
03.01.2012
Сообщения
15
Здесь в принципе можно и без js обойтись.

Код: 
<body>
<div id="bg">
	<img src="background.jpg" alt="" />
</div>
...
Код: 
#bg { z-index:-1; position:fixed; left:0; top:0; right:0; bottom:0; overflow:hidden; }
#bg img { display:block; width:100%; }
 
czp

czp

czp
Регистрация
05.06.2011
Сообщения
635
насколько я знаю, так не рекомендуется делать, по юзеринтерфейсу, юзерам кажется что они на одном месте топчатся, листаешь сайта фон один и тот же, не хорошо :blush:
 
Царя

Царя

Well-Known Member
Регистрация
27.01.2012
Сообщения
55
czp сказал(а):
насколько я знаю, так не рекомендуется делать, по юзеринтерфейсу, юзерам кажется что они на одном месте топчатся, листаешь сайта фон один и тот же, не хорошо :blush:
Нажмите, чтобы раскрыть...
мне наоборот так больше нравится, кажется, что стеклышко движется))

Light сказал(а):
Здесь в принципе можно и без js обойтись.

Код: 
<body>
<div id="bg">
	<img src="background.jpg" alt="" />
</div>
...
Код: 
#bg { z-index:-1; position:fixed; left:0; top:0; right:0; bottom:0; overflow:hidden; }
#bg img { display:block; width:100%; }
Нажмите, чтобы раскрыть...
я фон через css задавал =/

а все, получилось, спс :)

только можно пожалуйста пояснить значение этих строк

#bg { z-index:-1; position:fixed; left:0; top:0; right:0; bottom:0; overflow:hidden; }
#bg img { display:block; width:100%; }
​просто на конкурсе меня будут доскональна расспрашивать :(
 
Light

Light

Member
Регистрация
03.01.2012
Сообщения
15
только можно пожалуйста пояснить значение этих строк

#bg { z-index:-1; position:fixed; left:0; top:0; right:0; bottom:0; overflow:hidden; }
#bg img { display:block; width:100%; }
Нажмите, чтобы раскрыть...
Здесь вроде ничего сложного и нет. Можно влюбом справочнике по css посмотреть значения.)
#bg - блок, который служит подложкой для всей страницы. Внутри него как раз и лежит картинка, служащая фоном.
z-index: -1; - подложка является самым нижним слоем и не должна ничего перекрывать.
position: fixed; - привязывает блок к краям экрана, координаты задаются top, left и т.д. Не изменяет положения при прокрутке страницы.
overflow: hidden; - скрывает содержимое блока, если оно "вылазиет" за границы данного блока.
У картинки-фона img задаем ширину на 100%, чтобы фон всегда заполнял все пространство при любом разрешении экрана.
 
Царя

Царя

Well-Known Member
Регистрация
27.01.2012
Сообщения
55
Light сказал(а):
только можно пожалуйста пояснить значение этих строк

#bg { z-index:-1; position:fixed; left:0; top:0; right:0; bottom:0; overflow:hidden; }
#bg img { display:block; width:100%; }
Нажмите, чтобы раскрыть...
Здесь вроде ничего сложного и нет. Можно влюбом справочнике по css посмотреть значения.)
#bg - блок, который служит подложкой для всей страницы. Внутри него как раз и лежит картинка, служащая фоном.
z-index: -1; - подложка является самым нижним слоем и не должна ничего перекрывать.
position: fixed; - привязывает блок к краям экрана, координаты задаются top, left и т.д. Не изменяет положения при прокрутке страницы.
overflow: hidden; - скрывает содержимое блока, если оно "вылазиет" за границы данного блока.
У картинки-фона img задаем ширину на 100%, чтобы фон всегда заполнял все пространство при любом разрешении экрана.
Нажмите, чтобы раскрыть...
благодарю, лови спасибку...
 
Царя

Царя

Well-Known Member
Регистрация
27.01.2012
Сообщения
55
Light, он так подгоняется по ширине при этом в высоту не растягивается... что делать? :(
 
Light

Light

Member
Регистрация
03.01.2012
Сообщения
15
Царя, height: 100% у img добавить.
 
Статус
Закрыто для дальнейших ответов.

Онлайн статистика

Пользователи онлайн
1
Гости онлайн
9
Всего посетителей
10
Общее число может включать скрытых пользователей.

Статистика форума

Темы
10 929
Сообщения
64 046
Пользователи
12 691
Новый пользователь
С_е_р_г_е_й

Новые пользователи

Поделиться этой страницей

Верх Низ