Лента Каталог Файлы Форумы Услуги
ОсновноеRadiotalkПользовательское
Программирование
6   •   Посмотреть все темы

100% Фон для страницы

 
1

76
Kelvin @Kelvin
Здравствуйте. Вопрос такой:
Есть страница, есть фон страницы (Ваш КЭП), так вот - решил сделать фон резиновым, в мозг ничего не пришло кроме как засунуть в div
<img src="bg.jpg" style="position:fixed;width:100%;height:100%;top:0px;left:0px;z-index:-1;" align="center"/>
Всё ништяк, НО - правую сторону фона почему-то растягивает, когда ставлю фон с лицами - слева всё хорошо - справа косячит, и косячит в зависимости от разрешения монитора, именно правую сторону... Вот и вопрос - как быть?
Заранее большое спасибо, наверное Адмиралу.

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

Отредактировано Kelvin - 20.01.2012
1897
Александр @I-believe
body {
font-family: arial, sans-serif;
color: #цвет шрифта;
background:#цвет за фоном url(Картинка) no-repeat;
background-attachment: fixed;
background-position:center;
background-size: cover;}


Может так?

Отредактировано I-believe - 20.01.2012
76
Kelvin @Kelvin
Спасибо на этом. Почти так, но при cover'e уезжает верх, при auto'мате он режет картинку на большом разрешении...

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

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

Отредактировано Kelvin - 21.01.2012
6600
Александр @admiral
Kelvin пишет:

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

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

76
Kelvin @Kelvin
admiral пишет:

Kelvin пишет:

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

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

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

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

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

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

Отредактировано Kelvin - 21.01.2012
6600
Александр @admiral
Kelvin пишет:

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

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

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

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

297
Александр @SmoL
Как-то давно задался этим вопросом, в итоге решил его методом js. (Я не заставляю никого его использовать, просто даю готовое решение, может кому пригодится.)
<script type="text/javascript">
var i = new Image,
b;

function get(a) {
var c = document,
d = c.body,
e = c.documentElement,
f = "client" + a;
a = "scroll" + a;
return c.compatMode === "CSS1Compat" ? Math.max(e[f], e[a]) : Math.max(d[f], d[a])
}
window.onload = fon;

function fon() {
i.src = "http://ссылка_на_изображение.jpg";
i.style.position = "absolute";
i.style.left = "0px";
i.style.top = "0px";
i.style.width = get("Width") + "px";
i.style.height = get("Height") + "px";
i.style.zIndex = -999;
i.id="img"
document.body.appendChild(i)
}
window.onresize = function () {
var i = document.getElementById("img");
if(i) document.body.removeChild(i);
window.clearTimeout(b);
b = window.setTimeout(function () {
fon()
}, 20)
};
</script>
Ставим скрипт между <head></head>.
Фоновое изображение будет автоматически увеличатся и уменьшатся в зависимости от расширения монитора.
Только нужно ли такое? Я понял что нет))) Как бы при разных расширениях качество фона будет разное.

Отредактировано SmoL - 21.01.2012
76
Kelvin @Kelvin
Foggy пишет:

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

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

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

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

SmoL пишет:

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

SmoL пишет:

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

😵

SmoL пишет:

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

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

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

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

297
Александр @SmoL
Не качество, а размер.

Уверен?) О размере соглашусь, а насчет качества разве нет? Если изображение в ширину 600px, а его принудительно установить как 1000px, разве качество не пропадет?
Зачем решать js то, что можно за 5 секунд рисуется div'ом и тегом img?!

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

1410
Антон @tonik
SmoL пишет:

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

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

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

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

297
Александр @SmoL
admiral, вес картинки остается прежним 😀 , только качество меняется при растягивании.

2970
удалён @Foggy
Kelvin пишет:

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

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

Kelvin пишет:

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

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

SmoL пишет:

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

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

Kelvin пишет:

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

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

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