Фоновый рисунок во весь экран

[AntonSolo]

Подскажите пожалуйста как сделать фиксированный фоновый рисунок для body и чтобы рисунок отображался полность(Width:2000px; height:2000px например), был зафиксированным и менял свои размеры в зависимости от расширения экрана, но картинка отображалась полностью, например как здесь http://dakota.kiev.ua/articles/contacts.html Это возможно только с помощью css ? Спасибо

[Justnewone]

Подскажите пожалуйста как сделать фиксированный фоновый рисунок для body и чтобы рисунок отображался полность(Width:2000px; height:2000px например), был зафиксированным и менял свои размеры в зависимости от расширения экрана, но картинка отображалась полностью, например как здесь http://dakota.kiev.ua/articles/contacts.html Это возможно только с помощью css ? Спасибо

Ставите на firefox плагин firebug, 20 минут на изучение сметода использования и потом 3 минуты на решение вашей проблемы. И все остальные, раз есть образец перед глазами с этого момента станут решаться столь же быстро. "Как тут" на самом деле немного не то что Вы описали. Сделайте "как тут", думаю, что Вам подойдет.

[psywalker]

Подскажите пожалуйста как сделать фиксированный фоновый рисунок для body и чтобы рисунок отображался полность(Width:2000px; height:2000px например), был зафиксированным и менял свои размеры в зависимости от расширения экрана, но картинка отображалась полностью, например как здесь http://dakota.kiev.ua/articles/contacts.html Это возможно только с помощью css ? Спасибо

Если я тя понял, тебе нужен масштабируемый фон походу, что-бы менялся и растягивался в зависимости от разрешения экрана и при этом был фиксированным чтоли?

Ставите на firefox плагин firebug, 20 минут на изучение сметода использования и потом 3 минуты на решение вашей проблемы. И все остальные, раз есть образец перед глазами с этого момента станут решаться столь же быстро. "Как тут" на самом деле немного не то что Вы описали. Сделайте "как тут", думаю, что Вам подойдет.

Боюсь, что в этой свалке разобраться будет сложно ему. А вообще там просто тупо сделано так:

body {
[b]background-attachment:fixed;[/b]
background-image:url(http://dakota.kiev.ua/articles/templates/Dakota/images/back2.jpg);
background-position:center center;
}

[AntonSolo]

Ставите на firefox плагин firebug, 20 минут на изучение сметода использования и потом 3 минуты на решение вашей проблемы. И все остальные, раз есть образец перед глазами с этого момента станут решаться столь же быстро. "Как тут" на самом деле немного не то что Вы описали. Сделайте "как тут", думаю, что Вам подойдет.

Подскажите а правильно ли с точки зрения корректности что рисунок одного размера ну например 1500 на 2000, а отображается он обрезано ? Ну тоесть в теле документа не весь рисунок ? И можно ли сделать так чтобы рисунок в зависимости от расширения становился во всю ширину экрана но не repetom, а менялся размер рисунка ?

[psywalker]

Подскажите а правильно ли с точки зрения корректности что рисунок одного размера ну например 1500 на 2000, а отображается он обрезано ? Ну тоесть в теле документа не весь рисунок ? И можно ли сделать так чтобы рисунок в зависимости от расширения становился во всю ширину экрана но не repetom, а менялся размер рисунка ?

Всё для тебя дружище, накидал те три варианта:

http://psywalker.ru/Portfolio/AndreyD/main1.html

http://psywalker.ru/Portfolio/AndreyD/main2.html

http://psywalker.ru/Portfolio/AndreyD/main3.html

[AntonSolo]

Если я тя понял, тебе нужен масштабируемый фон походу, что-бы менялся и растягивался в зависимости от разрешения экрана и при этом был фиксированным чтоли?

Боюсь, что в этой свалке разобраться будет сложно ему. А вообще там просто тупо сделано так:

body {
[b]background-attachment:fixed;[/b]
background-image:url(http://dakota.kiev.ua/articles/templates/Dakota/images/back2.jpg);
background-position:center center;
}

Да нужен маштабируемый фон, как его правильно сделать ?

[psywalker]

Да нужен маштабируемый фон, как его правильно сделать ?

Ты меня опередил, смотри пост выше

[AntonSolo]

Всё для тебя дружище, накидал те три варианта:

http://psywalker.ru/Portfolio/AndreyD/main1.html

http://psywalker.ru/Portfolio/AndreyD/main2.html

http://psywalker.ru/Portfolio/AndreyD/main3.html

Спасибо огромное, примерно то что я хотел. Вечером попробую на своём примере

[Justnewone]

Спасибо огромное, примерно то что я хотел. Вечером попробую на своём примере

Особенно хорошо на нестандартных разрешениях будет смотреться.

[psywalker]

Спасибо огромное, примерно то что я хотел. Вечером попробую на своём примере

давай, отпишешься тогда

[AntonSolo]

Особенно хорошо на нестандартных разрешениях будет смотреться.

А что делать

давай, отпишешься тогда

ок, обязательно

[psywalker]

А что делать

ок, обязательно

1) Выбирать

2) Не забудь

[AntonSolo]

1) Выбирать

2) Не забудь

Использую третий вариант как для 6 IE убрать в самом низу пробел

Edited October 20, 2009 by AntonSolo

[psywalker]

Дело в том, что в ИЕ6 вообще position: fixed; не работает, поэтому предложил бы 2 варианта, либо забить на ИЕ6, либо так, но это походу означает, что экран НЕ должен в будущем иметь столько контента, что-бы экран прокручивался вниз

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Вариант 3</title>
<style type="text/css">
	*{ padding: 0; margin: 0;}
	body, html { height: 100%;}
		img {

			height: 100%;
			min-width: 60px;
			min-height: 300px;


			width: 100%;



			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
	div.wrap { min-height: 100%; overflow: auto; position: relative; z-index: 1;}
	div.foot { position: absolute; bottom: 0; left: 0; height: 100px; width: 100%; }
</style>
</head>

<body>
<img src="img/bg.jpg" alt="" />
<div class="wrap">

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

[AntonSolo]

Дело в том, что в ИЕ6 вообще position: fixed; не работает, поэтому предложил бы 2 варианта, либо забить на ИЕ6, либо так, но это походу означает, что экран НЕ должен в будущем иметь столько контента, что-бы экран прокручивался вниз

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Вариант 3</title>
<style type="text/css">
	*{ padding: 0; margin: 0;}
	body, html { height: 100%;}
		img {

			height: 100%;
			min-width: 60px;
			min-height: 300px;


			width: 100%;



			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
	div.wrap { min-height: 100%; overflow: auto; position: relative; z-index: 1;}
	div.foot { position: absolute; bottom: 0; left: 0; height: 100px; width: 100%; }
</style>
</head>

<body>
<img src="img/bg.jpg" alt="" />
<div class="wrap">

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

Такой вариант не подойдёт, буду искать решения )

[Searcher]

почему не подходит?

[Verder]

Такой вариант не подойдёт, буду искать решения )

Можно поизвращаться и сделать во флэше контейнер в котором фоном будет картинка. Тогда она будет растягиваться и сжиматься как угодно, но придется повозиться с оптимизацией качества изображения под большие разрешения монитора.

P.S.

А вообще это бред, нельзя так терроризировать графику, тем более бэкграунд.

[psywalker]

AntonSolo

Дружище, а я тебе так скажу. Такая реализация с фоном с помощью чистого CSS дорогого стоит и я лично рад, что мне довелось научится это делать. Буду тебе очень признателен, если ты найдёшь ещё варианты решения такого фона

Verder

P.S.

А вообще это бред, нельзя так терроризировать графику, тем более бэкграунд.

Зацени мой первый вариант, там как раз терроризм отсутствует, так как фон масштабируется как нужно, вот поэтому мне этот способ и нравится

Edited October 21, 2009 by psywalker

[AntonSolo]

почему не подходит?

Ну а если будет много контента ? Вот поэтому и не подходит

[Searcher]

Ну а если будет много контента ? Вот поэтому и не подходит

А если фон оставить на месте, а поверх вставить еще абсолютный див во все окно с прокруткой и в нем уже весь контент?

Edited October 21, 2009 by Searcher

[psywalker]

А если фон оставить на месте, а поверх вставить еще абсолютный див во все окно с прокруткой и в нем уже весь контент?

в ИЕ6 при таком раскладе фон на месте не остаётся, если я тебя не так понял, то приведи плиз рабочий пример

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Вариант 3</title>
<style type="text/css">
	*{ padding: 0; margin: 0;}
	body, html { height: 100%; overflow: hidden;}
		img {

			height: 100%;
			min-width: 60px;
			min-height: 300px;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
	div.wrap {height: 100%; overflow: auto; position: relative; z-index: 1; overflow: auto;}

</style>
</head>

<body>
<img src="img/bg.jpg" alt="" />
<div class="wrap">


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

Контейнер div.wrap надо забить содержимым

Edited October 21, 2009 by psywalker

[AntonSolo]

А если фон оставить на месте, а поверх вставить еще абсолютный див во все окно с прокруткой и в нем уже весь контент?

psywalker подсказал вариант вроде всё работает, но в 6 IE есть один нюанс . пока воспользуюсь его подсказкой. Спасибо за вариант

[psywalker]

psywalker подсказал вариант вроде всё работает, но в 6 IE есть один нюанс . пока воспользуюсь его подсказкой. Спасибо за вариант

Да, но думаю что игра стоит свеч всёже

[AntonSolo]

в ИЕ6 при таком раскладе фон на месте не остаётся, если я тебя не так понял, то приведи плиз рабочий пример

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Вариант 3</title>
<style type="text/css">
	*{ padding: 0; margin: 0;}
	body, html { height: 100%; overflow: hidden;}
		img {

			height: 100%;
			min-width: 60px;
			min-height: 300px;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
	div.wrap {height: 100%; overflow: auto; position: relative; z-index: 1; overflow: auto;}

</style>
</head>

<body>
<img src="img/bg.jpg" alt="" />
<div class="wrap">


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

Контейнер div.wrap надо забить содержимым

Мне понравился этот твой вариант:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Вариант 3</title>

<style type="text/css">

*{ padding: 0; margin: 0;}

body, html { height: 100%; overflow-y: hidden;}

body { overflow-y: auto}

img {

height: 100%;

min-width: 60px;

min-height: 300px;

width: 100%;

position: absolute;

top: 0;

left: 0;

right: 0;

z-index: -1;

}

div.wrap { position: relative; overflow: auto; height: 100%; z-index: 1;}

</style>

</head>

<body>

<img src="img/body_bg.gif" alt="" />

<div class="wrap">

<p>text </p>

</div>

</body>

</html>

Он работает нормально за исключением при добавлении

*html body {

width:expression(document.documentElement.clientWidth < 1200 ? "1200px" : "auto");

}

div.wrap {min-width:1200px}

В 6 IE при прокрутке горизонтального скрола картинка тоже двигается, сейчас ищу варианты чтобы и при прокрутке горизонтального скрола в 6 IE картинка была фиксированной

[Searcher]

psywalker, собственно, я и имел ввиду, то, что ты сделал

AntonSolo, вы суть не поняли... содержимое находится в контейнере wrap, не надо всякие

width:expression(document.documentElement.clientWidth < 1200 ? "1200px" : "auto");

применять к html и body. ширину вам нужно ограничивать для контейнера wrap.

А это что?!

body, html { height: 100%; overflow-y: hidden;}
body { overflow-y: auto}

достаточно написать

body, html { height: 100%; overflow: hidden;}

Edited October 22, 2009 by Searcher

[psywalker]

Searcher

А приведи пожалуйста код для ИЕ6 что-бы ограничить ширину именно контейнера div.wrap , а не body