CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 293   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

0

Растягивающаяся фоновая картинка

Jemand 12542 ,
CSS

Пример растягивающегося фонового изображения на примере заглушки для сайта.
1. CSS

* {
	margin: 0;
	padding: 0;
	behavior: url(iepngfix.htc) /* Прозрачность PNG в IE */
	}
html, body{
	width:100%;
	height:100%;
	min-width:1000px;
    }
#page {
	top: 50%;
	left: 50%;
	width: 760px;
	height: 350px;
	margin-top: -300px;
	margin-left: -400px;
	position: absolute;
	text-align: center;
	padding: 250px 20px 0 20px;
	font-size: 500%;
	font-family: Georgia;
	background: url(cont.png);
	}
#page a {
	color: #eaeaea;
	text-decoration: none;
}
#page a:hover {
	color: #000;
	text-decoration: none;
}
#fon {
	height: 100%;
	width: 100%;
	min-width: 1000px;
	max-width: 1600px;
	}
#fon img {
	height: 100%;
	width: 100%;
	position: absolute;
}

2. Internet Explorer PNG fix

<script type="text/javascript" src="iepngfix_tilebg.js"></script>

Скрипт добавляем в раздел <head>
JS, HTC и GIF для прозрачности PNG в IE можно скачать здесь.
3. HTML

<div id="fon">
	<img src="fon.jpg">
</div>
<div id="page"><!-- Здесь содержимое сайта --></div>

Демо

Рекламная пауза

Оставить комментарий