Растягивающийся фон))

@asid · Регистрация: 18.03.2010

Товарищи, прошу помощи! Я начинающий сайтосозидатель))), изучаю html, но вот проблема такая, никак не могу понять как сделать стартовый фон сайта растягивающимся.... счас объясню...

Хочу фоном на главной(стартовой) странице моего будущего сайта была определенная(желаемая мной)))) картинка! Знаю, как сделать фон, но вот незадача! Ставлю картинку, а она отображается в реальном размере, у меня разрешение монитора 1280x1024, а картинки 800x600 и она начинает дублироваться, в общем, получается каша! Я же хочу чтоб картинка была на весь сайт(как-бы растянулась)... но самое главное, чтобы при смене размера окна, размер картинки тоже менялся, понимаете!?)) А то ведь мониторы у всех разные! (например, как в этом сайте "pwpvp.ru" там как окно не расширяй/сужай картинка меняется ему в такт!)
Подскажите пожалуйста или, если не сложно, напишите код!
Заранее очень благодарен!

@Green90 · 18.03.2010, 13:18

задай ей параметры(ширину и высоту) не в пикселях а в процентах (100%)

@asid · 18.03.2010, 13:52 **[ТС]**

Сообщение от Green90

задай ей параметры(ширину и высоту) не в пикселях а в процентах (100%)

Спасибо за ответ, если не сложно, выложи пожалуйся код!

@-scout- · 18.03.2010, 14:02

HTML5

1	width="100%" height="100%"

@Green90 · 18.03.2010, 14:04

и вписывать нужно в параметры самой картинки

Добавлено через 17 секунд
просто решил пояснить

@asid · 18.03.2010, 14:27 **[ТС]**

напишите пожалуйста полностью код, я пока еще нуб совсем в этом деле)) что-то у меня не получается прицепить данные характеристики к картинке!
<body background="моя картинка.jpg"> --- этой командой я задаю фон, но куда здесь цеплять width="100%" height="100%"

@][акер · 18.03.2010, 18:10

HTML5

<HTML>
<HEAD>
</head>
<BODY>
<IMG src="RUSSIA.jpg" width=100% height=100%></img>
</body>
</html>

Вместо RUSSIA.jpg поставь фотографию, которую ты хочешь.

@asid · 18.03.2010, 18:58 **[ТС]**

Сообщение от ][акер

HTML5

<HTML>
<HEAD>
</head>
<BODY>
<IMG src="RUSSIA.jpg" width=100% height=100%></img>
</body>
</html>

Вместо RUSSIA.jpg поставь фотографию, которую ты хочешь.

Спасибо огромное))

Добавлено через 8 минут
Блин, видимо меня не совсем поняли! мне не просто картинку нужно вставить, а фон - background!
Чтобы поверх таблицы кидать можно было, тексты писать!!

@figaro · 18.03.2010, 19:38

HTML5

1	<IMG src="blabla.jpg" style="z-index:-1; width:100%"></img>

@asid · 18.03.2010, 19:52 **[ТС]**

Спасибо большое за помощь, но мне нужно было это!))

HTML5

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Растягиваемый фон</title>
  <style type="text/css">
   #layer1 {
    z-index: 1; /* Порядок слоев */
    width: 100%; /* Ширина слоя с фоном */
    height: 100%; /* Высота слоя с фоном */
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Положение от левого края окна */
    top: 0; /* Положение от верхнего края */
   }
   #layer2 {
    position: absolute; /* Абсолютное позиционирование */
    z-index: 2; /* Порядок слоев */
   }
  </style>
 </head>
 <body>
  <div id="layer1">
    <img src="help.gif" width="100%" alt="">
  </div>
  <div id="layer2">
    Основное содержимое веб-страницы
  </div>
 </body>
</html>

@A1mazik · 18.03.2010, 20:04

asid, если не секрет где нашел?

14.07.2010, 18:57

layer1 и layer2 над поменять местами да и отступ для фона указать не помешает )
мои 5 копеек:

HTML5

#layer1 {
position: absolute; <!--/* Абсолютное позиционирование */-->
z-index: 2; <!--/* Порядок слоев */-->
left: 0; <!--/*если страница меньше окна то фон не будет причиной появления полосы прокрутки*/-->
top: 0; 
}
#layer2 {
z-index: 1; <!--/* Порядок слоев */-->
width: 100%;
height: 100%;
position: absolute; <!--/* Абсолютное позиционирование */-->
left: 0;
top: 0;
}
</head>
<body>
<div id="layer1">
<img src="http://*******.jpg" width="100%" height="100%" alt="">
</div>
<div id="layer2">
Основное содержимое веб-страницы
</div>
</body>

@Hagrael · 15.07.2010, 06:28

Только стили надо заключить в <style>, написать начало <head> и <html>

@GalaX · 15.07.2010, 06:48

так компактнее будет:

HTML5

<html>
<head>
<style type="text/css">
#background, #content {
  position : absolute;
  left : 0;
  top : 0;
  width : 100%;
  height : 100%;
}
</style>
</head>
<body>
<img id="background" src="my_background_image.jpg">
<div id="content">
Основное содержимое веб-страницы
</div>
</body>

@Hagrael · 15.07.2010, 08:12

GаlаX, <html>-то не закрыл

13.11.2010, 08:38

Что то не работает ваше растягивание?

@GalaX · 13.11.2010, 09:21

Сообщение от St884

Что то не работает ваше растягивание?

это вопрос или утверждение? т.к. все нормально работает

13.11.2010, 09:41

точно работает....!!!!

Добавлено через 10 минут
Спасибо!

@shapera · 13.11.2010, 15:18

HTML5

<head>
....
<style type="text/css">
body {
background: url(img.jpg); no-repeat;
}
</style>
....
</head>

как-то нетак

@asid 1 / 1 / 0 Регистрация: 18.03.2010 Сообщений: 5
		1
	Растягивающийся фон)) 18.03.2010, 13:16. Просмотров 16807. Ответов 18 Метки нет (Все метки) Товарищи, прошу помощи! Я начинающий сайтосозидатель))), изучаю html, но вот проблема такая, никак не могу понять как сделать стартовый фон сайта растягивающимся.... счас объясню... Хочу фоном на главной(стартовой) странице моего будущего сайта была определенная(желаемая мной)))) картинка! Знаю, как сделать фон, но вот незадача! Ставлю картинку, а она отображается в реальном размере, у меня разрешение монитора 1280x1024, а картинки 800x600 и она начинает дублироваться, в общем, получается каша! Я же хочу чтоб картинка была на весь сайт(как-бы растянулась)... но самое главное, чтобы при смене размера окна, размер картинки тоже менялся, понимаете!?)) А то ведь мониторы у всех разные! (например, как в этом сайте "pwpvp.ru" там как окно не расширяй/сужай картинка меняется ему в такт!) Подскажите пожалуйста или, если не сложно, напишите код! Заранее очень благодарен! 0

@Green90 Пскович 48 / 50 / 0 Регистрация: 29.09.2009 Сообщений: 492
	18.03.2010, 13:18	2
	задай ей параметры(ширину и высоту) не в пикселях а в процентах (100%) 1

@asid 1 / 1 / 0 Регистрация: 18.03.2010 Сообщений: 5
	18.03.2010, 13:52 [ТС]	3
	Сообщение от Green90 задай ей параметры(ширину и высоту) не в пикселях а в процентах (100%) Спасибо за ответ, если не сложно, выложи пожалуйся код! 0

@Green90 Пскович 48 / 50 / 0 Регистрация: 29.09.2009 Сообщений: 492
	18.03.2010, 14:04	5
	и вписывать нужно в параметры самой картинки Добавлено через 17 секунд просто решил пояснить 1

@asid 1 / 1 / 0 Регистрация: 18.03.2010 Сообщений: 5
	18.03.2010, 14:27 [ТС]	6
	напишите пожалуйста полностью код, я пока еще нуб совсем в этом деле)) что-то у меня не получается прицепить данные характеристики к картинке! <body background="моя картинка.jpg"> --- этой командой я задаю фон, но куда здесь цеплять width="100%" height="100%" 0

@A1mazik 4 / 4 / 0 Регистрация: 14.03.2010 Сообщений: 69
	18.03.2010, 20:04	11
	asid, если не секрет где нашел? 0

@Hagrael БТР - мой друг 332 / 276 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	15.07.2010, 06:28	13
	Только стили надо заключить в <style>, написать начало <head> и <html> 0

@Hagrael БТР - мой друг 332 / 276 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	15.07.2010, 08:12	15
	GаlаX, <html>-то не закрыл 1

St884
	13.11.2010, 08:38	16
	Что то не работает ваше растягивание?

@GalaX 701 / 572 / 59 Регистрация: 18.11.2008 Сообщений: 2,147
	13.11.2010, 09:21	17
	Сообщение от St884 Что то не работает ваше растягивание? это вопрос или утверждение? т.к. все нормально работает 1

St884
	13.11.2010, 09:41	18
	точно работает....!!!! Добавлено через 10 минут Спасибо!