Реализация сложного фона средствами CSS

Radik_45 · October 22, 2010

Добрый день. Назрел такой вопрос с реализацией многослойного фона.

На картинке - очень хороша видна суть, и все описано. Очень похоже сделано здесь - http://dgame.ru/ (сильно уменьшите масштаб чтобы посмотреть как реализован фон), но - у них реализовано на табличках. Хотелось бы (по крайней мере по кускам) замутить на дивах.

Я думаю на изображениях все предельно понятно, если что-то нет дообъясню

Как должно выглядеть в браузере (если окно меньше или равно 1000px)

Как должно выглядеть при уменьшении масштаба/увеличении разрешения

P.S. Опять же, ребята, просто кому интересно, может быть просто навести на мысль даже по кускам, я и сам не проч позамарачиваться, спецификацию я знаю, опыта только не достает((

Great Rash · October 22, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html {
			font-size: 100.1%;
		}

		body {
			font: 62.5%/1.5em Arial, Tahoma, Verdana, sans-serif;
			color: #000;
			background: #fff;
		}

		.wrapper {
			overflow: hidden;
			padding-bottom: 50px;
		}

		.main {
			position: relative;
			width: 980px;
			height: 500px;
			margin: 0 auto;
			padding: 10px;
			background: green;
		}

		.bg {
			position: absolute;
			width: 50px;
			height: 50px;
			background: red;
		}

		.bg1 {
			top: 0;
			left: -50px;
		}

		.bg2 {
			top: 0;
			right: -50px;
		}

		.bg3 {
			bottom: 0;
			left: -50px;
		}

		.bg4 {
			bottom: 0;
			right: -50px;
		}

		.bg5 {
			bottom: -50px;
			left: 50%;
			margin-left: -25px;
		}
	</style>
</head>

<body>

	<div class="wrapper">
		<div class="main">
			<div class="bg bg1"></div>
			<div class="bg bg2"></div>
			<div class="bg bg3"></div>
			<div class="bg bg4"></div>
			<div class="bg bg5"></div>

			<p>
				text text text
			</p>
		</div>
	</div>

</body>
</html>

Radik_45 · October 22, 2010

Great Rash : Ага, здорово. Респект и уважуха.

Я делал примерно также позиционировал эти фиксированные блоки, + overflow: hidden; у контейнера.

При этом проблемка тут (на чем я собственно и застрял) - 1) слева отлично во всех браузерах, а вот справа в Опере и ИЕ6,7 все равно торчит свободное место, (если блоки будут больше то будет вовсе некрасиво - большое пустое место) и 2) в том что нижний блок все равно виден (если высота контейнера больше окна браузера, он же должен быть виден только в случае если контейнер меньше окна браузера).

Great Rash · October 22, 2010

У вас контейнер не может быть меньше или больше окна браузера, т.к. он у вас 100% в высоту, а значит нижнюю картинку можно сделать так же как прижимают подвал.

По поводу того, что где-то что-то не так работает: я вам набросал макет, а уж допиливать его ваше дело, а не мое. Я же не буду за вас вашу работу делать - мне за нее на платят.

Radik_45 · October 22, 2010

Да никто вас не просит ничью работу делать, не ответить - абсолютно ваше право. Вы дали идею - я сказал Спасибо.

Что касается высоты, здесь видимо моя ошибка высота должна быть не 100% а auto т.е. смысл в том что тянуться контейнер должен по содержимому и если уменьшить масштаб - то низ будет виден.

Edited October 22, 2010 by Radik_45

Great Rash · October 22, 2010

В таком случае тут помогут только скрипты.

Radik_45 · October 23, 2010

Решение для лишнего скроллбара (баг) в Опера, ИЕ6,7 нашел (если кому мож пригодится)

.wrapper {

overflow: hidden;

padding-bottom: 50px;

position: absolute; left: 0; top: 0; bottom: 0; right: 0; // - нужно добавить

}

Sign In

Реализация сложного фона средствами CSS

Question

Radik_45

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Radik_45

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Radik_45

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Radik_45

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information