Вы не зашли.

#1 

Kelvin
Ученик
Зарегистрирован: 2012-01-20
Сообщений: 76
На форуме: 21 час.
Репутация: 1 (67%) ±
Инфо  Написать

Здравствуйте. Вопрос такой:
Есть страница, есть фон страницы (Ваш КЭП), так вот - решил сделать фон резиновым, в мозг ничего не пришло кроме как засунуть в div

Всё ништяк, НО - правую сторону фона почему-то растягивает, когда ставлю фон с лицами - слева всё хорошо - справа косячит, и косячит в зависимости от разрешения монитора, именно правую сторону... Вот и вопрос - как быть?
Заранее большое спасибо, наверное Адмиралу.

PS: Искал в интернете и в гугле, и в яндексе, даже на рамблер ходил - все решения, а главное итоги - абсолютно такие же, как описано выше.

Отредактированно Kelvin (2012-01-20 21:04:31)

Неактивен

#2 

I-believe
Знаток
Имя: ProFes
Откуда: SIN-CL
Зарегистрирован: 2009-03-31
Сообщений: 1897
На форуме: 691 час.
Репутация: 222 (89%) ±
Инфо  Написать

body {
font-family: arial, sans-serif;
color: #цвет шрифта;
background:#цвет за фоном url(Картинка) no-repeat;
background-attachment: fixed;
background-position:center;
background-size: cover;}


Может так?

Отредактированно I-believe (2012-01-20 11:16:31)


Похоже Дракоше плюсики заменяют женщину © Болтай.

Неактивен

#3 

Kelvin
Ученик
Зарегистрирован: 2012-01-20
Сообщений: 76
На форуме: 21 час.
Репутация: 1 (67%) ±
Инфо  Написать

Спасибо на этом. Почти так, но при cover'e уезжает верх, при auto'мате он режет картинку на большом разрешении...

Если есть ещё варианты - буду благодарен.

Ещё вопрос - каким размером лучше всего сделать фон, что бы он был аля юнивёрсал?

Отредактированно Kelvin (2012-01-21 01:57:14)

Неактивен

#4 

admiral
Status is loading... 99,9%
Имя: Alexandr
Откуда: берутся NaNы?
Зарегистрирован: 2007-02-04
Сообщений: 6600
На форуме: 1713 час.
Репутация: 1124 (100%) ±
Инфо  Вебсайт  Написать

Сообщение от Kelvin:

Если есть ещё варианты - буду благодарен.

единственный правильный вариант - подбирать фон такой что бы при увеличении разрешения и размножении по x и y был плавный переход, растягивать картинку фона в зависимости от разрешения, это извиняюсь извращение, хотя и можно это сделать через js, растягиванием нижнего слоя как фона


Скорая помощь - всегда рядом!
99% ошибок сидит в полуметре от монитора.

Неактивен

#5 

Kelvin
Ученик
Зарегистрирован: 2012-01-20
Сообщений: 76
На форуме: 21 час.
Репутация: 1 (67%) ±
Инфо  Написать

Сообщение от admiral:

Сообщение от Kelvin:

Если есть ещё варианты - буду благодарен.

единственный правильный вариант - подбирать фон такой что бы при увеличении разрешения и размножении по x и y был плавный переход, растягивать картинку фона в зависимости от разрешения, это извиняюсь извращение, хотя и можно это сделать через js, растягиванием нижнего слоя как фона

Честно сказать подумывал про js, но ещё ничего подобного не делал.
Будем искать c перламутровыми пуговицами и без крыльев big_smile
Спасибо.

Неактивен

#6 

admiral
Status is loading... 99,9%
Имя: Alexandr
Откуда: берутся NaNы?
Зарегистрирован: 2007-02-04
Сообщений: 6600
На форуме: 1713 час.
Репутация: 1124 (100%) ±
Инфо  Вебсайт  Написать

фон можно нормально сделать и без таких сложностей, и с пуговицами и с крыльями, работала бы фантазия)


Скорая помощь - всегда рядом!
99% ошибок сидит в полуметре от монитора.

Неактивен

#7 

Kelvin
Ученик
Зарегистрирован: 2012-01-20
Сообщений: 76
На форуме: 21 час.
Репутация: 1 (67%) ±
Инфо  Написать

Дело лишь в том, что на фоне периодически бывают лица людей, и немного не красиво когда их корявит, ещё и с одной стороны =/
Фоны с картинками, например занавес - ложиться так что родной автор не заметит кривости кода или моих рук, но когда дела доходит до лиц, правая сторона вызывает у меня нервный тик, кстати правого глаза wink

PS Дело точно не в глазе.

Отредактированно Kelvin (2012-01-21 02:29:37)

Неактивен

#8 

admiral
Status is loading... 99,9%
Имя: Alexandr
Откуда: берутся NaNы?
Зарегистрирован: 2007-02-04
Сообщений: 6600
На форуме: 1713 час.
Репутация: 1124 (100%) ±
Инфо  Вебсайт  Написать

Сообщение от Kelvin:

PS Дело точно не в глазе.

дело в в том как подобран и разработан фон, можно лица разместить на фоне под минимальное разрешение страницы в 1000px по ширине например, а все что больше замещать цветом под фон на котором эти лица расположены
PS это только один из вариантов


Скорая помощь - всегда рядом!
99% ошибок сидит в полуметре от монитора.

Неактивен

#9 

Foggy
памагу за 50€, помогу за 5
Имя: Андрей
Откуда: Петербург
Зарегистрирован: 2008-04-21
Сообщений: 2970
На форуме: 446 час.
Репутация: 296 (97%) ±
Инфо  Вебсайт  Написать

Масштабирование фона. Мб адекватно будет отображаться при contain?
Коли нет, можно попробовать следующй алгоритм:
С помощью js вычислять ширину и высоту body. После вычислить ширину и высоту дива (такого, каким вы указали его в первом сообщении). Если они равны, то установить фон для body с параметром contain. Если нет, делать див фиксированной ширины (как в контакте например) и задавать фон ему. В таком случае для body задать какой-то другой фон, типа "пуговиц".

Если вы опишете, откуда берётся фон (загружается пользователем, загружается админом, выбирается с какого-нибудь сайта из чьей-нибудь галереи типа flickr или picasa), это может упростить задачу.


Форум чище без подписей в настройках. Рекомендую.
Я искал, но не нашёл.
Помощь — платная. Избранным помогаю за идею. Избранный тот, кто придумал идею, а не скопипастил.

Неактивен

#10 

SmoL
Постоялец
Имя: Александр
Откуда: Украина
Зарегистрирован: 2009-08-12
Сообщений: 289
На форуме: 794 час.
Репутация: 77 (98%) ±
Инфо  Вебсайт  Написать

Как-то давно задался этим вопросом, в итоге решил его методом js. (Я не заставляю никого его использовать, просто даю готовое решение, может кому пригодится.)

Ставим скрипт между <head></head>.
Фоновое изображение будет автоматически увеличатся и уменьшатся в зависимости от расширения монитора.
Только нужно ли такое? Я понял что нет))) Как бы при разных расширениях качество фона будет разное.

Отредактированно SmoL (2012-01-21 15:33:32)

Неактивен

#11 

Kelvin
Ученик
Зарегистрирован: 2012-01-20
Сообщений: 76
На форуме: 21 час.
Репутация: 1 (67%) ±
Инфо  Написать

Сообщение от Foggy:

С помощью js вычислять ширину и высоту body. После вычислить ширину и высоту дива (такого, каким вы указали его в первом сообщении). Если они равны, то установить фон для body с параметром contain.

Того, каким я указал в первом сообщении - это 100%. Даже на идеально квадратном мониторе высота и ширина не может быть равна друг другу. Ну если только при использовании F11 в браузере.

Сообщение от Foggy:

Если вы опишете, откуда берётся фон...  это может упростить задачу.

Не может. Фон берется от дизайнера. Это нужно, например  - есть 4 сезона, зима, лето, весна и осень. Вот эти 4 картинки и будут меняться в сезон.
Проблема скорее всего в размерах фона. Буду пробовать что-то типа как Адмирал посоветовал.

Сообщение от SmoL:

Как-то давно задался этим вопросом, в итоге решил его методом js.

Сообщение от SmoL:

Только нужно ли такое? Я понял что нет)))

wacko

Сообщение от SmoL:

Как бы при разных расширениях качество фона будет разное.

Не качество, а размер. И это нормально. Просто мне нужно что бы ещё и пропорции максимально сохранялись.
Если ты не понял - этот вопрос решил I-believe, значением cover.
Далее моя проблема осталась, видимо, в самой картинке.

Зачем решать js то, что можно за 5 секунд рисуется div'ом и тегом img?!

Всё равно Спасибо. И отдельно I-believe и Адмиралу.

Неактивен

#12 

SmoL
Постоялец
Имя: Александр
Откуда: Украина
Зарегистрирован: 2009-08-12
Сообщений: 289
На форуме: 794 час.
Репутация: 77 (98%) ±
Инфо  Вебсайт  Написать

Не качество, а размер.

Уверен?) О размере соглашусь, а насчет качества разве нет? Если изображение в ширину 600px, а его принудительно установить как 1000px, разве качество не пропадет?

Зачем решать js то, что можно за 5 секунд рисуется div'ом и тегом img?!

Дело твое как сделать, я не заставлял брать скрипт, я же просто привел пример не только для одного тебя) может кому еще пригодится smile

Неактивен

#13 

tonik
Знаток
Имя: Антон
Откуда: Россия, АЛТАЙ
Зарегистрирован: 2010-03-17
Сообщений: 1410
На форуме: 571 час.
Репутация: 178 (99%) ±
Инфо  Вебсайт  Написать

Сообщение от SmoL:

Если изображение в ширину 600px, а его принудительно установить как 1000px, разве качество не пропадет?

Взять за основу 1500... пусть сжимает... и на качество не повлияет...
Или я не прав?)

Неактивен

#14 

SmoL
Постоялец
Имя: Александр
Откуда: Украина
Зарегистрирован: 2009-08-12
Сообщений: 289
На форуме: 794 час.
Репутация: 77 (98%) ±
Инфо  Вебсайт  Написать

tonik, можно и так, но я представляю сколько страничка будет грузится с таким фоном)))

Отредактированно SmoL (2012-01-21 19:25:35)

Неактивен

#15 

admiral
Status is loading... 99,9%
Имя: Alexandr
Откуда: берутся NaNы?
Зарегистрирован: 2007-02-04
Сообщений: 6600
На форуме: 1713 час.
Репутация: 1124 (100%) ±
Инфо  Вебсайт  Написать

tonik, а если разрешение будет больше? 1680x1050 например или 1920x1200, еще больше увеличивать размер и тем самым вес картинки? Это тупиковый выход.


Скорая помощь - всегда рядом!
99% ошибок сидит в полуметре от монитора.

Неактивен

#16 

SmoL
Постоялец
Имя: Александр
Откуда: Украина
Зарегистрирован: 2009-08-12
Сообщений: 289
На форуме: 794 час.
Репутация: 77 (98%) ±
Инфо  Вебсайт  Написать

admiral, вес картинки остается прежним smile, только качество меняется при растягивании.

Неактивен

#17 

Foggy
памагу за 50€, помогу за 5
Имя: Андрей
Откуда: Петербург
Зарегистрирован: 2008-04-21
Сообщений: 2970
На форуме: 446 час.
Репутация: 296 (97%) ±
Инфо  Вебсайт  Написать

Сообщение от Kelvin:

Того, каким я указал в первом сообщении - это 100%. Даже на идеально квадратном мониторе высота и ширина не может быть равна друг другу. Ну если только при использовании F11 в браузере.

Я не имел ввиду, что ширина и высота равны. Я говорил, что кол-во пикселей дива в ширину равно кол-ву body в ширину. Аналогично с высотой.

Сообщение от Kelvin:

Не может. Фон берется от дизайнера. Это нужно, например  - есть 4 сезона, зима, лето, весна и осень. Вот эти 4 картинки и будут меняться в сезон.
Проблема скорее всего в размерах фона. Буду пробовать что-то типа как Адмирал посоветовал.

Вот может же.
Однако, совет адмирала судя по данным вами данным подходит наилучшим образом.
Smol также предложил хороший вариант. Для него надо нарисовать крупные картинки (шириной минимум 1920 пикс.) и будет работать отлично.

Сообщение от SmoL:

admiral, вес картинки остается прежним smile, только качество меняется при растягивании.

А какая разница какой вес? Дело в том, что портится качество отображения. Вы хотите видеть размытые фотографии? А фотографии квадратиками? (разные браузеры растягивают разными методами)

Сообщение от Kelvin:

Зачем решать js то, что можно за 5 секунд рисуется div'ом и тегом img?!

Затем, что предложенные не js решения вас не устроили. А решение вполне неплохое между прочим.


Форум чище без подписей в настройках. Рекомендую.
Я искал, но не нашёл.
Помощь — платная. Избранным помогаю за идею. Избранный тот, кто придумал идею, а не скопипастил.

Неактивен

#18 

Kelvin
Ученик
Зарегистрирован: 2012-01-20
Сообщений: 76
На форуме: 21 час.
Репутация: 1 (67%) ±
Инфо  Написать

Большая разнится какой вес... У кого-то траффик и каждый байт на счету, у кого-то интернет медленный.
SmoL - если изменять размер исходного фона - вес будет увеличиваться, ежели же тупо растянуть - можно сразу удалять его или вообще оставить как есть.
Foggy, меня устроило решение и если прочитаешь внимательней - заметишь. Устроило, НО не полностью. А это "неплохое решение" - у меня изначально стоит. Пусть по-другому, но исход один!

Неактивен

[ Generated in 0.008 seconds, 9 queries]