Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.89/87: Рейтинг темы: голосов - 87, средняя оценка - 4.89
1 / 1 / 0
Регистрация: 18.03.2010
Сообщений: 5
1

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

18.03.2010, 13:16. Просмотров 16807. Ответов 18
Метки нет (Все метки)

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

Хочу фоном на главной(стартовой) странице моего будущего сайта была определенная(желаемая мной)))) картинка! Знаю, как сделать фон, но вот незадача! Ставлю картинку, а она отображается в реальном размере, у меня разрешение монитора 1280x1024, а картинки 800x600 и она начинает дублироваться, в общем, получается каша! Я же хочу чтоб картинка была на весь сайт(как-бы растянулась)... но самое главное, чтобы при смене размера окна, размер картинки тоже менялся, понимаете!?)) А то ведь мониторы у всех разные! (например, как в этом сайте "pwpvp.ru" там как окно не расширяй/сужай картинка меняется ему в такт!)
Подскажите пожалуйста или, если не сложно, напишите код!
Заранее очень благодарен!
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.03.2010, 13:16
Ответы с готовыми решениями:

Растягивающийся блок
Как сделать блок который будет растягиваться в зависимости от контента ??? У блока идёт фоновое...

2 фиксированных блока и 1 растягивающийся
Есть три блока: левый, правый и центральный. Нужно через CSS сделать чтобы левый и правый были...

Растягивающийся div в таблице
Здравствуйте. Как сделать, чтобы div растягивался в зависимости от содержимого, когда он находится...

Растягивающийся блок посередине
Задача: есть content и 2 сайдбара. Нужно чтобы сайдбары в ширину были по 180px, а контент занимал...

18
Пскович
48 / 50 / 0
Регистрация: 29.09.2009
Сообщений: 492
18.03.2010, 13:18 2
задай ей параметры(ширину и высоту) не в пикселях а в процентах (100%)
1
1 / 1 / 0
Регистрация: 18.03.2010
Сообщений: 5
18.03.2010, 13:52  [ТС] 3
Цитата Сообщение от Green90 Посмотреть сообщение
задай ей параметры(ширину и высоту) не в пикселях а в процентах (100%)
Спасибо за ответ, если не сложно, выложи пожалуйся код!
0
16 / 15 / 3
Регистрация: 12.06.2009
Сообщений: 90
18.03.2010, 14:02 4
HTML5
1
width="100%" height="100%"
1
Пскович
48 / 50 / 0
Регистрация: 29.09.2009
Сообщений: 492
18.03.2010, 14:04 5
и вписывать нужно в параметры самой картинки

Добавлено через 17 секунд
просто решил пояснить
1
1 / 1 / 0
Регистрация: 18.03.2010
Сообщений: 5
18.03.2010, 14:27  [ТС] 6
напишите пожалуйста полностью код, я пока еще нуб совсем в этом деле)) что-то у меня не получается прицепить данные характеристики к картинке!
<body background="моя картинка.jpg"> --- этой командой я задаю фон, но куда здесь цеплять width="100%" height="100%"
0
#define книжный_червь Я
184 / 95 / 21
Регистрация: 30.01.2010
Сообщений: 780
18.03.2010, 18:10 7
HTML5
1
2
3
4
5
6
7
<HTML>
<HEAD>
</head>
<BODY>
<IMG src="RUSSIA.jpg" width=100% height=100%></img>
</body>
</html>
Вместо RUSSIA.jpg поставь фотографию, которую ты хочешь.
1
1 / 1 / 0
Регистрация: 18.03.2010
Сообщений: 5
18.03.2010, 18:58  [ТС] 8
Цитата Сообщение от ][акер Посмотреть сообщение
HTML5
1
2
3
4
5
6
7
<HTML>
<HEAD>
</head>
<BODY>
<IMG src="RUSSIA.jpg" width=100% height=100%></img>
</body>
</html>
Вместо RUSSIA.jpg поставь фотографию, которую ты хочешь.

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

Добавлено через 8 минут
Блин, видимо меня не совсем поняли! мне не просто картинку нужно вставить, а фон - background!
Чтобы поверх таблицы кидать можно было, тексты писать!!
0
43 / 41 / 4
Регистрация: 10.03.2010
Сообщений: 196
18.03.2010, 19:38 9
HTML5
1
<IMG src="blabla.jpg" style="z-index:-1; width:100%"></img>
1
1 / 1 / 0
Регистрация: 18.03.2010
Сообщений: 5
18.03.2010, 19:52  [ТС] 10
Спасибо большое за помощь, но мне нужно было это!))
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>
1
4 / 4 / 0
Регистрация: 14.03.2010
Сообщений: 69
18.03.2010, 20:04 11
asid, если не секрет где нашел?
0
flirk
14.07.2010, 18:57 12
layer1 и layer2 над поменять местами да и отступ для фона указать не помешает )
мои 5 копеек:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#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>
БТР - мой друг
332 / 276 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
15.07.2010, 06:28 13
Только стили надо заключить в <style>, написать начало <head> и <html>
0
701 / 572 / 59
Регистрация: 18.11.2008
Сообщений: 2,147
15.07.2010, 06:48 14
так компактнее будет:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>
0
БТР - мой друг
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
Что то не работает ваше растягивание?
701 / 572 / 59
Регистрация: 18.11.2008
Сообщений: 2,147
13.11.2010, 09:21 17
Цитата Сообщение от St884 Посмотреть сообщение
Что то не работает ваше растягивание?
это вопрос или утверждение? т.к. все нормально работает
1
St884
13.11.2010, 09:41 18
точно работает....!!!!

Добавлено через 10 минут
Спасибо!
9 / 9 / 0
Регистрация: 31.10.2010
Сообщений: 100
13.11.2010, 15:18 19
HTML5
1
2
3
4
5
6
7
8
9
<head>
....
<style type="text/css">
body {
background: url(img.jpg); no-repeat;
}
</style>
....
</head>

как-то нетак
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
13.11.2010, 15:18

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Растягивающийся блоки с разными пропорциями на всю ширину
Всем привет, задача заключается в следующем: есть блок, растягивающийся на всю ширину другого блока...

Растягивающийся блок внутри блока на всю высоту окна
Здравствуйте, есть родительский блок, занимающий 100% высоты и 100% ширины окна, в нем находятся...

Фон позади кнопки должен быть, как фон блока
Фон позади кнопки должен быть, как фон блока Это сложно объяснить словами, скину скрины макета ...

Фон body перекрывает фон остальных элементов
Добрый день. Столкнулся с такой проблемой когда писал сss код body{ background:red;}; div...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
19
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.