Другие языки программирования и технологии

Вопрос по верстке. Картинка бэкграундом

Делается сайт, бэкграундом на всю страницу стоит картинка. Можно сделать так, чтобы картинка сжималась или расширялась в зависимости от расширения монитора И как это можно сделать?На данные момент по настройкам получается так, что картинка больше расширения экрана и большая часть картинки просто не видна.
Сергей Васин
Сергей Васин
188
Да запросто.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.container {
position:absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#back {
z-index: 0;
}
#content {
z-index: 1;
}
</style>
</head>
<body>
<div class="container" id="back">
<img src="background.jpg" width="100%" height="100%" alt="alter"></div>
<div class="container" id="content">
<p>Всё содержимое документа</p>
</div>
</body>
</html>

Только понятно, что она ВСЕГДА будет ровно в размер экрана и пропорции будут те же!

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

Впрочем, последующий товарищ намного смешнее. Знает слово CSS. А я тут, простите в чём написал, в Perl? ))))))
Леня .
Леня .
56 168
Лучший ответ
Сделайте фоновую картинку такой, чтобы она могла повторяться без уерба дизайну. Например, сделайте ее меньше, удалите обрезанные объекты, чтобы остались только целые. Хорошо повротяемости поддаются картинки неба с тучками, город с домами и т. п. Если не получается, можно просто сделать рисунок для фона попроще. только градианта вполне хватит.

Можно заполнить фон градиентом, прописав его в файле CSS как стиль для всего документа, BODY:

BODY {
margin: 0px;
padding: 0px;
font-family: Tahoma, Verdana;
font-size: 12px;
color: #000000;
background-image: url(../img/bg_grad.png);
background-repeat: repeat-x;
background-position: left top;
}

Затем можно вставить еще класс, который будет поверх повторяющегося фона BODY, например, в левом верхнем углу, вставлять неповторяющийся рисунок:

.top_bg_img {
margin: 0px;
padding: 0px;
background-image: url(../img/bg_top_img.png);
background-repeat: no-repeat;
background-position: left top;
}

Ориентируйтесь на то, что сейчас наиболее часто встречается ширина экрана 1024, но скоро будет 1280 пикселов. Обладатели очень больших мониторов получат заполненные градиентом или другим повторяющимся рисунком оставшуюся часть экрана, при этом все увидят ваш фоновый неповторяющийся рисунок.
Влад Корженевич
Влад Корженевич
2 606
надо всё в CSS смотреть!
там прописывать
Женгис Турдымуратов
Женгис Турдымуратов
1 326

Похожие вопросы