Фоновый рисунок

xameleon · November 16, 2008

помогите плиз умным тегом что бы подогнать размер фонового рисунка под размеры страницы. что бы при любом разрешении картинка не уезжала.

 width: 75%; /* Ширина блока */
 height: 90%; /* Высота блока */

не катят с

 
BODY {
  background: 
  url("123.jpg") /* Путь к графическому файлу */
  no-repeat /* Отменяем повторение рисунка */
  0px /* Смещаем рисунок вправо */ 
  0px; /* Сдвигаем рисунок вниз */
text-align: center;
  }

Edited November 16, 2008 by xameleon

xameleon · November 16, 2008

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

rus · November 16, 2008

Смотря что за картинка, если она имеет повторяющийся элемент (гардиент, рисунок) и она небольшая, то есть смысл повторять ее по оси x и y.

А если она скажем 800х600, то нет смысла ее растягивать, иначе она потеряет качество и растянется (есть риск) НЕ пропорционально.

А вообще что бы ее растянуть ставить ей 100% ширины и высоты.

xameleon · November 16, 2008

в том то и дело что <BODY> не поддерживает ширину и высоту, этот дег может делать только повторение. картинка большая (чето около 1900*1500). и я хочу её сделать задним фоном с эфектом полузатуманености белым цветом. а поверх неё уже все меню (т.е. кнопки, новости и т.д.) но проблемма в том что т.к. картинка не подстраивается под размеры браузера то при разном разрешении будет разная часть картинки.

->можно ли назначить фоном таблицу а в неё вставить эту картинку через <img>?

rus · November 16, 2008

Есть такой вот выход:

<!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=windows-1251" />
<title>Документ без названия</title>
<style>
html, body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
.fon {
	width: 100%;
	border: 0;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: -1;
}
div {
font: bold 14px Verdana;
text-decoration: none;
color:#014D8B;
text-align:center;
}
</style>
</head>
<body>
<div>Тут некий контент</div>
<p><img class="fon" src="015_111.jpeg" alt="фон" /></p>
</body>
</html>

Думаю там сам разберешься?

xameleon · November 16, 2008

возможно ли использование нескольких фонов с наложением друг на друга?

вроде заработаллоо . щас буду разбираться в коде, большое спасибо

rus · November 16, 2008

возможно ли использование нескольких фонов с наложением друг на друга?

В принципе - можно все!

Юзаем параметр z-index, на этом сайте есть его описание.

Оффтоп: вспомнился анекдот про принцип.

Мужик на улице подходит к другому и спрашивает:

- Скажите, а где тут магазин "Принцип"?

- ???

- Ну просто все так говорят: ..."у меня нет, но в принципе найти можно"...

xameleon · November 16, 2008

нубский вопросик, а куда воткнуть background-attachment: fixed ?

в общем то структуру понял, получается что просто картинка просто находится на заднем плане, соответственно <body> уже не нужен

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

rus · November 16, 2008

Не советую так извращаться, картинки весят много и соответственно загрузка страницы будет идти долго.

нубский вопросик, а куда воткнуть background-attachment: fixed ?

Картинка если ты заметил идет не бэком..., тогда зачем спрашивается background-attachment: fixed ?

xameleon · November 16, 2008

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

Searcher · November 17, 2008

при использовании в стилях разных z-index и position:absolute для разных div можно добиться любого количества наложений. А последующее использование overflow:auto для div с контентом, у которого, естественно, должен быть наибольший z-index, даст эффект фиксированного фона.

почитайте об этих свойствах и о div на htmlbook.ru

xameleon · November 21, 2008

сделал z-index=0 и overflow:auto для див с контентом, итог, картинка фоновая растянулась вниз до конца текста. вопрос, так и должно быть?

Edited November 21, 2008 by xameleon

АлексUNDER · April 18, 2009

Незнал , куда еще описать, решил прямо тут. Ибо поиск не помог.

Неправ, поправте плиз.

Суть проблемы такая.

я незнаю как НА КОНТЕНТ натянуть фон, не под, а на контент, чтобы при его копировании сохранялся прозрачный гиф, а не текстовый контет и не графический , а только муляж в лице прозрачного гиф 1х1 пикс ???

кажется такой трюк есть на playground или еще на каком-то игровом сайте, непомню точно...

Victor Ananiev · April 18, 2009

нужно натянуть картинку z-index + position:absolute + top:-npx; как то так

Sign In

Фоновый рисунок

Question

Link to comment

Share on other sites

13 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

Join the conversation

Обсуждения

Important Information