Не масштабируемый фон

bob_24 · October 1, 2011

Допустим есть такой код:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
html, body{height:100%;}
.back{
	width:100%;
	height:100%;
	background:url('1 (2).jpg') no-repeat;
	}
</style>
</head>
<body>
<div class="back">

</div>
</body>
</html>

и выглядит все это вот так:

если уменьшить страницу, то будет так:

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

Softlink · October 1, 2011

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

ну наверное картинку обрезать как надо? Сделать background-position: top center;

bob_24 · October 1, 2011

Эм...причем тут обрезать?

После этих действий у вас картинка при любом масштабе остается одного размера?

Edited October 1, 2011 by bob_24

Softlink · October 1, 2011

Эм...причем тут обрезать?
После этих действий у вас картинка при любом масштабе остается одного размера?

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

bob_24 · October 1, 2011

Да, тут моя ошибка.) пропустил слово "масштаба", при изменении масштаба страницы. Что бы было так:

уменьшили масштаб, стало так

Edited October 1, 2011 by bob_24

Softlink · October 1, 2011

и все равно порезать картинку))) и background-size ей

bob_24 · October 1, 2011

А смысл в обрезании картинки?

Softlink · October 1, 2011

А смысл в обрезании картинки?

В том, что bg-size будет масштабировать все изображение фона. Т.е. если у вас картинка сама по себе большая, то блок залезет она полностью. А если мы вырежем нужный кусок, то только он и будет растягиваться на всех окнах.

Посмотрите пример http://jsfiddle.net/MR53P/

bob_24 · October 1, 2011

Ладно, вопрос останется нерешенным. Как еще объяснить что мне надо я не знаю) Но и на том спасибо

Edited October 1, 2011 by bob_24

psywalker · October 1, 2011

Ладно, вопрос останется нерешенным. Как еще объяснить что мне надо я не знаю) Но и на том спасибо

Ты про масштаб с помощью колеса мыши что ли?

У тебя на рисунках тоже картинка после масштаба остаётся такого же размера. Так что советую сначала и по пунктам объяснить, как и что делается и должно быть.

Softlink · October 1, 2011

Не понимаю, разве это не то, что надо http://alpatriott.ru/works/primer/op.html ?

bob_24 · October 1, 2011

Чую я всех запутал.) Softlink, так наоборот не должно быть. Должно быть так: http://www.gazprom-sh.nl/ru/

Видите, фон справа внизу (хотя он там везде), вот эти огоньки, всегда остается на весь экран.

Ну В общем как с подвалом: только тут когда уменьшаешь должно остаться на весь экран, а когда увеличиваешь должно увеличиваться с контентом.

psywalker · October 1, 2011

</div>

#background 
{
    display: none;
    height: 100%;
    left: 0;
    min-width: 950px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;

#background img {
    height: 100%;
    width: 100%;
}

SelenIT · October 1, 2011

плюс вот такой скриптец

var back = $("#background");
$(back).height($("#outer").height()).show();

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

atew · October 3, 2011

background-size: cover;

или

http://htmlbook.ru/css/background-size

Edited October 3, 2011 by atew

Sign In

Не масштабируемый фон

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information