Как с помощью одного css растянуть фоновое изображение :: Web-программирование :: Компьютерный форум Ru.Board

Перейти из форума на сайт.

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в on-line?

Вход • Забыли пароль? • Первый раз на этом сайте? • Регистрация

Компьютерный форум Ru.Board » Интернет » Web-программирование » Как с помощью одного css растянуть фоновое изображение

Модерирует : Cheery
Версия для печати • Подписаться • Добавить в закладки

Открыть новую тему

Написать ответ в эту тему

Omsk

Advanced Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

В файле прописан background:
BODY {
background: url(images/bear.jpg);
color: #000000;
margin: 0px;
}

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

Всего записей: 925 | Зарегистр. 22-02-2007 | Отправлено: 08:09 23-09-2010

Voloom Newbie	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору background: url(images/bear.jpg) repeat;
	Всего записей: 5 \| Зарегистр. 19-01-2010 \| Отправлено: 11:25 23-09-2010

Advanced Member

Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

repeat вроде же по умолчанию

----------
www.MyFirstSite.ru - информационный ресурс для начинающих веб-мастеров

Всего записей: 710 | Зарегистр. 08-09-2007 | Отправлено: 12:26 23-09-2010

Omsk Advanced Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Voloom, не помогает, repeat стоит по-умолчанию.
	Всего записей: 925 \| Зарегистр. 22-02-2007 \| Отправлено: 13:37 23-09-2010

Cheery

.:МордератоР:.

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Omsk

Цитата:

И эта картинка на странице не одна.

вы хотите фон body или других элементов?

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 22:06 23-09-2010

Omsk Advanced Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Я имел ввиду, что не одна это несколько фоновых рисунков получается на странице, а надо растянуть, чтобы был один.
	Всего записей: 925 \| Зарегистр. 22-02-2007 \| Отправлено: 08:02 24-09-2010

Church Advanced Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору div-подложка на всю страницу с картинкой (не фон, а именно img) внутри и шириной в 100%
	Всего записей: 1199 \| Зарегистр. 05-09-2003 \| Отправлено: 11:58 24-09-2010

Advanced Member

Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

background: url(images/bear.jpg);
background-size: 100% 100%;

Добавлено:
ну и остальное про сайз уже нагуглить легко

----------
Человек, который осмеливается потратить впустую час времени, ещё не осознал цену жизни.
© Чарльз Дарвин

Всего записей: 997 | Зарегистр. 20-04-2006 | Отправлено: 21:11 26-09-2010

Omsk

Advanced Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Я вот как написал:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<title>Пробная страница</title>
<body>
<div id="layer1">
<img src="img/peluches.jpg" width="100%" alt="">
</div>
<div id="layer2">
<img src=./img/bear.jpg width=50 height=50>
<p align=right><img src=./img/bear.jpg width=50 height=50>
<p align=center>
<h1>Текст страницы<h1>
</div>
</body>
</html>
Все становится криво, Фонов становится несколько штук.
В style.css такой код:
background: url('img/peluches.jpg');
} */

#layer1 {
z-index: 1; /* Порядок слоев */
width: 100%; /* Ширина слоя с фоном */
height: 100%; /* Высота слоя с фоном */
position: absolute; /* Абсолютное позиционирование */
left: 0; /* Положение от левого края окна */
top: 0; /* Положение от верхнего края */
}
#layer2 {
position: absolute; /* Абсолютное позиционирование */
z-index: 2; /* Порядок слоев */
}
}
Когда стиль вынесен в отдельный файл, не работает, когда написан в файле html, то работает, а мне надо вариант с отдельным файлом.

Всего записей: 925 | Зарегистр. 22-02-2007 | Отправлено: 09:04 28-09-2010

Advanced Member

Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

Omsk
Что-то ты совсем запутал.. Может нарисуешь какой результат нужен?

Зачем такая мутотень со слоями..

На сколько я понял, тебе надо было, чтобы бэкграунд у боди, блока, без разницы чего не повторялся, а заполнял всё пространство одной кратинкой при любом изменении размера блока.
Тогда чем не подходит бэкграунд-сайз?

----------
Человек, который осмеливается потратить впустую час времени, ещё не осознал цену жизни.
© Чарльз Дарвин

Всего записей: 997 | Зарегистр. 20-04-2006 | Отправлено: 12:16 28-09-2010

Omsk

Advanced Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Мне надо, чтобы бекграунд при любом разрешении экрана был растянут на всю страницу как влитой. И поверх бекграунда были бы все элементы.
background-size не помогает, т.к. при нем на странице 4 фона становится. [

Всего записей: 925 | Зарегистр. 22-02-2007 | Отправлено: 13:05 28-09-2010 | Исправлено: Omsk, 13:06 28-09-2010

Advanced Member

Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

Omsk
Ну вообще какраз background-size и тянет изображение..

Возможно браузер старый? Это в CSS 3 добавлено.

HTML:

Код:

<html>
<head>

<title>123</title>
<link href="bs.css" rel="stylesheet" media="all" />

</head>
<body>

123456

</body>
</html>

CSS:

Код:

body {
background: url('http://i.ru-board.com/images/remake1.gif') no-repeat center top;
background-size: 100%;
}

----------
Человек, который осмеливается потратить впустую час времени, ещё не осознал цену жизни.
© Чарльз Дарвин

Всего записей: 997 | Зарегистр. 20-04-2006 | Отправлено: 13:37 28-09-2010

Omsk Advanced Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору В опере 10.60 этот код работает, в firefox 3.6.10 и в ИЕ6 не работает. Почему?
	Всего записей: 925 \| Зарегистр. 22-02-2007 \| Отправлено: 13:12 04-10-2010

Advanced Member

Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

Omsk

Цитата:

Возможно браузер старый? Это в CSS 3 добавлено.

Написал же уже.. А ИЕ6 естественно слишком бородат для этого..

----------
Человек, который осмеливается потратить впустую час времени, ещё не осознал цену жизни.
© Чарльз Дарвин

Всего записей: 997 | Зарегистр. 20-04-2006 | Отправлено: 15:16 04-10-2010

Открыть новую тему

Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Как с помощью одного css растянуть фоновое изображение

Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2025

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC