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

AntonSolo · October 20, 2009

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

AntonSolo · October 22, 2009

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;}

Так пропадут всякие скролы для 6IE. Контент будет отображаться только в рамках видимости окна броузера(Я говорю про 6 IE) А собственно вся загвоздка в нём родном

Что - то не нахожу я ответа. Наверно тема загнётся :angry:

Edited October 23, 2009 by AntonSolo

Searcher · October 23, 2009

Нет, AntonSolo, вы так и не поняли! Скроллы для боди надо убрать, потому что скроллы будут у контейнера wrap. Что вы все выдумываете?!

Вот работающий вариант, как просил psywalker с ограничением ширины в 1000px. Пришлось ограничивать ширину элемента скриптОм, если вынести в expression - IE виснет. А кучу контейнеров не хотелось навешивать.

<!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%; width: 100%; overflow: auto; position: relative; z-index: 1; overflow: auto;}
		#content {min-width: 1000px;}

</style>
<!--[if lte IE 6]>
<script type="text/javascript">//<![CDATA[
window.attachEvent('onload', mmwidth);
window.attachEvent('onresize', mmwidth);
function mmwidth(){
  document.getElementById('content').style.width = ((document.documentElement.clientWidth || document.body.clientWidth) < 1000) ? '1000px' : 'auto';
};
//]]></script>
<![endif]-->
</head>

<body>
  <img src="img/bg.jpg" alt="" />
  <div class="wrap">
	<div id="content">
	  <p>Заполните контентом, прежде чем проверять</p>
	  <p>Заполните контентом, прежде чем проверять</p>
	  <p>Заполните контентом, прежде чем проверять</p>
	</div>
  </div>
</body>
</html>

psywalker · October 23, 2009

Searcher

Вот это ты матанул идею вообще круто дружище, но я понял, у нас не получалось из-за скрипта, который мы не моги написать для ИЕ6 в отличии от тебя.

Пожалуйста, ты не мог бы сделать одну фигню, если это для тебя ерунда.

Вобщем вот страница, с фоном, который из всех вариантов нравится мне больше всех, потому что тут фон хорошо масштабируется, но вот незадача

1) В ИЕ6 этот фон вообще не работает, а очень хотелось-бы

2) В ФФ и в ИЕ7 всё отлично, но вот в Сафари, Хроме и Опере 9.2, 9.6 при сужении экрана происходит бяка, а точнее картинка суживается сверху и внизу и получаются белые полосы по краям.

Я тебя очень прошу найти решения данной проблемы и сделать полный кросс, если ты сможешь

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

p.s. - может быть есть какой нибудь JS код, который смог бы починить эту вещь, было бы супер. Жаль, что я не разбираюсь в нём. Но а если есть решение на CSS, то тогда вообще класс :angry:

2) А посмотри что присходит с прижтым подвалом при твоей идее. Как прижать грамотно? Если двигать горизонтальный скрол, то подвал обрезается справа страшно, что это такое, понять не могу http://www.psywalker.ru/Portfolio/AndreyD/...dreyD/main.html

Edited October 23, 2009 by psywalker

marcool · October 26, 2009

psywalker, я воспользовался Вашим третьим вариантом (http://psywalker.ru/Portfolio/AndreyD/main3.html), Вы не могли бы подсказать, мне надо поставить логотип в определенное место , делаю я это так: создаю контейнер, позиционирую(absolute) допустим по середине, а он при другом расширении экрана поднимается наверх, как же сделать что бы он оставался на месте?

Спасибо

psywalker · October 26, 2009

psywalker, я воспользовался Вашим третьим вариантом (http://psywalker.ru/Portfolio/AndreyD/main3.html), Вы не могли бы подсказать, мне надо поставить логотип в определенное место , делаю я это так: создаю контейнер, позиционирую(absolute) допустим по середине, а он при другом расширении экрана поднимается наверх, как же сделать что бы он оставался на месте?
Спасибо

Не знаю, я вот доделал лично свой проект и у меня с лого всё в порядке, посмотри как у меня: http://psywalker.ru/Portfolio/AndreyDekhty.../main-page.html А вообще надо учить и читать книжки

Searcher · October 26, 2009

Searcher
Вот это ты матанул идею вообще круто дружище, но я понял, у нас не получалось из-за скрипта, который мы не моги написать для ИЕ6 в отличии от тебя.
Пожалуйста, ты не мог бы сделать одну фигню, если это для тебя ерунда.
Вобщем вот страница, с фоном, который из всех вариантов нравится мне больше всех, потому что тут фон хорошо масштабируется, но вот незадача
1) В ИЕ6 этот фон вообще не работает, а очень хотелось-бы
2) В ФФ и в ИЕ7 всё отлично, но вот в Сафари, Хроме и Опере 9.2, 9.6 при сужении экрана происходит бяка, а точнее картинка суживается сверху и внизу и получаются белые полосы по краям.
Я тебя очень прошу найти решения данной проблемы и сделать полный кросс, если ты сможешь
http://psywalker.ru/Portfolio/AndreyD/main1.html
p.s. - может быть есть какой нибудь JS код, который смог бы починить эту вещь, было бы супер. Жаль, что я не разбираюсь в нём. Но а если есть решение на CSS, то тогда вообще класс
2) А посмотри что присходит с прижтым подвалом при твоей идее. Как прижать грамотно? Если двигать горизонтальный скрол, то подвал обрезается справа страшно, что это такое, понять не могу http://www.psywalker.ru/Portfolio/AndreyD/...dreyD/main.html

ох... хотел бы помочь, но со временем сейчас кирдык совсем... я попробую найти минутко, но врядли удастся

psywalker · October 26, 2009

ох... хотел бы помочь, но со временем сейчас кирдык совсем... я попробую найти минутко, но врядли удастся

Ээхх правда жалко друг, эту идею я выцепил и доработал почти до конца, не хватает какого то штриха и мы откроем идею реально "Масштабируемого фона", о котором некоторые только мечтать могут, а главное в деле замешан только лишь CSS, что добавляет ему ещё большую ценность. Я уже просто запарился решать эту задачу, у меня не хватает опыта видимо, да и тема необычная. Ну да ладно, если нет времени - значит нет, не надо себе во вред делать друг Может когда нибудь я сам до этого дойду и смогу решить без помощи других, спасибо за инициативу, ты и так уже много что сделал

ChipAlina · October 28, 2009

Всё для тебя дружище, накидал те три варианта:
http://psywalker.ru/Portfolio/AndreyD/main1.html
http://psywalker.ru/Portfolio/AndreyD/main2.html
http://psywalker.ru/Portfolio/AndreyD/main3.html

не открываются ссылочки((( а очень хочется посмотреть..как это сделать?

psywalker · October 28, 2009

Просто перенёс ссылки, посмотри конеш

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

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

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

ChipAlina · October 28, 2009

спасибо!

psywalker · October 28, 2009

спасибо!

Не за что, у тебя осталось ещё два желания

ChipAlina · October 28, 2009

psywalker Подскажите пожалуйста, почему когда я заменяю 0% на 50% в свойстве left (для img) картинка не двигается?

psywalker · October 28, 2009

psywalker Подскажите пожалуйста, почему когда я заменяю 0% на 50% в свойстве left (для img) картинка не двигается?

номер страницы?

ChipAlina · October 29, 2009

страница это вариант в смысле?

третий вариант, 22 строчка...

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

верхняя у меня уплывает.. вправо

psywalker · October 29, 2009

psywalker Подскажите пожалуйста, почему когда я заменяю 0% на 50% в свойстве left (для img) картинка не двигается?

Потому что у картинки стоит ширина 100% и не важно откуда она будет начинаться, всё равно на весь экран рястянется

и еще волновал такой вопрос...у меня две картинки. одна над другой...причем верхняя по размерам меньше..при уменьшении окна, как сделать так , что бы она как бы залипла на нижней картинке, т.е. перемещалась с ней вместе ?
верхняя у меня уплывает.. вправо sad.gif

Скрин того, что хочешь получить с подробным объяснением

ChipAlina · October 29, 2009

Потому что у картинки стоит ширина 100% и не важно откуда она будет начинаться, всё равно на весь экран рястянется

убрала width: 100% , поставила left: 10% - картинка изменила просто свой размер (т.е. растянулась на 80% ширины окна браузера), но слева не отступила

Скрин того, что хочешь получить с подробным объяснением

http://potashnikova-alina.narod.ru/

если что не так загружаю - говорите, я лузер в этом деле.

psywalker · October 29, 2009

убрала width: 100% , поставила left: 10% - картинка изменила просто свой размер (т.е. растянулась на 80% ширины окна браузера), но слева не отступила
http://potashnikova-alina.narod.ru/
если что не так загружаю - говорите, я лузер в этом деле.

1) Когда ты убираешь ширину, то картинка становиться такой ширины, которой является, и если ставишь слева отступ, то также должна отступать, у меня лично так. Каким браузером пользуешься?

2) Чё то я нихрена не понял проблему, чё нужно получить?

ChipAlina · October 29, 2009

1) Когда ты убираешь ширину, то картинка становиться такой ширины, которой является, и если ставишь слева отступ, то также должна отступать, у меня лично так. Каким браузером пользуешься?
2) Чё то я нихрена не понял проблему, чё нужно получить?

1) IE 6 и Ореrой 9.10

2) это я так объясняю ... В общем, так..

- у меня фон в виде картинки я его задаю в файле css таким образом

body

{

border: 0;

padding: 0;

margin: 0;

background-color: #dee8fc;

background-position: 50% 0;

background-image: url("back.jpg");

background-repeat: no-repeat;

background-attachment: scroll;

}

- далее я хочу вставить div в котором тоже будет картинка, и эта картинка находиться сверху фона но в определенном месте, там где серая полоска(см. ссылку на изображение ранее)

- я описываю параметры этой картинки в css

div.panel

{

border: 0;

padding: 0;

margin: 0;

background-image: url("panel.jpg");

background-repeat: no-repeat;

background-attachment: scroll;

position: relative;

top: 1%;

left: 19.6%;

width: 100%;

height: 100%;

z-index: 1;

}

- и по идеи она должна отходить на 1%сверху и 19.6% слева...все правильно так и отходит ..т.е. при полностью развернутом окне браузера, эта картинка у меня находиться в нужном месте на фоне.

- но! когда я начинаю менять окно браузера: фон то у меня потихоньку смещается (т.е. в видмой области остается центр фона), а вот оранжевая картинка(т.е. та которая сверху фона) остается на прежнем месте..получается что она уходит вправо с нужного положения.

- нужно: что бы она вместе с фоном , при изменении окна браузера, оставалась на своем положении ОТНОСИТЕЛЬНО фона.

Фуф...ничего не понятно...

по ходу с этим справиться могут только table а не divы...я что то совсем замучалась...

bot87 · May 10, 2011

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

<a href="http://psywalker.ru/Portfolio/AndreyD/main1.html" target="_blank">http://psywalker.ru/Portfolio/AndreyD/main1.html</a>

<a href="http://psywalker.ru/Portfolio/AndreyD/main2.html" target="_blank">http://psywalker.ru/Portfolio/AndreyD/main2.html</a>

<a href="http://psywalker.ru/Portfolio/AndreyD/main3.html" target="_blank">http://psywalker.ru/Portfolio/AndreyD/main3.html</a>

а ссылки возобновит можно??

Просто перенёс ссылки, посмотри конеш <img src="http://forum.htmlbook.ru/public/style_emoticons/<#EMO_DIR#>/cool.gif" style="vertical-align:middle" emoid="" border="0" alt="cool.gif" />
<a href="http://psywalker.ru/Forum/AndreyD/main1.html" target="_blank">http://psywalker.ru/Forum/AndreyD/main1.html</a>
<a href="http://psywalker.ru/Forum/AndreyD/main2.html" target="_blank">http://psywalker.ru/Forum/AndreyD/main2.html</a>
<a href="http://psywalker.ru/Forum/AndreyD/main3.html" target="_blank">http://psywalker.ru/Forum/AndreyD/main3.html</a>

уже нинада

seretykini · August 16, 2011

Здравствуйте уважаемые, ради бога простите ежели влез не в тот топик. Увас где нибудь можно рекламу на сайт cartbucks.ru разместить. Тизер , место под рекламу.

Партнерка восхитительная пашет уже успешно 4 года. Выплаты кстате и в систему вебмане и на счет мобильного телефона. Из основных направлений сайты знакомств, игры, Методика, курсы, видео. Очень высокий конверт. Партнерская программа напичкана множеством всяких технических полезностей, выбора тарифов, парковки доменов, промоматериаллами и т.д. Также встроена система интеграции с социальными сетями. Если вы являетесь участником допустим фейсбука, вам только нужно кликнуть под понравившимся сайтом и все ваши друзья получат ссылку на этот сайт, при переходе их на него вам начисляються деньги. Это действилено качественная смс партнерка. Все данные на сайте cartbucks.ru

apple0101 · October 23, 2011

Ребят, хоть и тема старая, подскажите как сделать так, чтобы со скриптом, который ниже (его psywalker на 2-ой странице писал), можно было не одну картинку во весь экран поставить, а несколько, чтобы их можно было просматривать, используя полосу прокрутки. Пробовал через table, frame - безуспешно. С frame делил страницу на 3 столбца, вставлял 3 фотки, еще добавлять картинок не получалось, т.к нет полосы прокрутки. С table-ом почти тоже самое или хуже.

Вот сам скрипт:

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

<head>

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

*{ 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>

</div>

</body>

</html>

Sign In

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

Question

Link to comment

Share on other sites

46 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

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