Резиновый слой с изображением

Gohhan · December 4, 2009

Доброго дня. Начал изучать HTML совсем не давно,вот столкнулся вот с такой проблемой.

Задача: Создать фон для страницы,используя изображение большого разрешения,но при этом сделать его резиновым по горизонтали. Давно видел,такую идею,за фон берут изображение,режут его вертикали по полам и при изменении размера монитора или открытии панели закладок,то есть подгонка размера изображения фона под монитор пользователя,одна часть изображения фона заходит на другую,при этом изображение оптимизировано так,что швов практически не видно,а фон хорошо подогнан под разрешение монитора.

Помоги советом,как такое или другим способом реализовывается.

Вот мой начальный код,очень мало,но двинуться дальше не могу.

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>1</title>
</head>
<body>
<div id="head_fon" style="position: absolute; width: 1280px; height: 790px; z-index: 1">
	<img height="790" src="head_fon.jpg" width="1280" /></div>

</body>
</html>

s0rr0w · December 4, 2009

Доброго дня. Начал изучать HTML совсем не давно,вот столкнулся вот с такой проблемой.
Задача: Создать фон для страницы,используя изображение большого разрешения,но при этом сделать его резиновым по горизонтали. Давно видел,такую идею,за фон берут изображение,режут его вертикали по полам и при изменении размера монитора или открытии панели закладок,то есть подгонка размера изображения фона под монитор пользователя,одна часть изображения фона заходит на другую,при этом изображение оптимизировано так,что швов практически не видно,а фон хорошо подогнан под разрешение монитора.
Помоги советом,как такое или другим способом реализовывается.
Вот мой начальный код,очень мало,но двинуться дальше не могу.

Читаем на сайте htmlbook.ru про css свойство background

Gohhan · December 4, 2009

Читаем на сайте htmlbook.ru про css свойство background

Скажите пожалуйста,на какие свойства CSS следует обратить особое внимание,для решении моей задачи?

Justnewone · December 4, 2009

Скажите пожалуйста,на какие свойства CSS следует обратить особое внимание,для решении моей задачи?

Все семейство background.

Лучше прям по шагам пройтись, там не долго получится.

Gohhan · December 4, 2009

Прочитал про стиль фона,не нашел метода решения.Решил выложить небольшую картинку,где показано,что я именно хочу сделать.

Изображение 1280х790 разделить на 4 равные части.И как я понимаю все части задать как отдельные слои.3 часть без движна.Часть 1 заходит под 3,2 заходит под 4,при изменении окна браузера по вертикали.При изменении окна браузера по горизонтали 2 часть заходит под 1,а 4 под 3. Я думаю это оптимальный способ,когда нужно сохранить фоновое изображение цельным,но при этом оптимизировать под разрешения и размер окна браузера.

Надеюсь понятно написал :blink: Хочется услышать мнение и помощь в реализации.

Justnewone · December 4, 2009

Прочитал про стиль фона,не нашел метода решения.Решил выложить небольшую картинку,где показано,что я именно хочу сделать.
Изображение 1280х790 разделить на 4 равные части.И как я понимаю все части задать как отдельные слои.3 часть без движна.Часть 1 заходит под 3,2 заходит под 4,при изменении окна браузера по вертикали.При изменении окна браузера по горизонтали 2 часть заходит под 1,а 4 под 3. Я думаю это оптимальный способ,когда нужно сохранить фоновое изображение цельным,но при этом оптимизировать под разрешения и размер окна браузера.
Надеюсь понятно написал Хочется услышать мнение и помощь в реализации.

4 вложенных последовательно дива с бекграундами. С порядком поиграйтесь, я ответ вижу, но хочется, чтобы Вы сами дошли.

Gohhan · December 4, 2009

Вот,что у меня получилось:

<style type="text/css">
body {
	margin:0px;
}
.b1{
	background-image:url('fonmpk_01.gif');
	background-repeat:no-repeat;
	background-position:left top;
	height:381px;
	width:659px;
}
.b2 {
	background-image:url('fonmpk_02.gif');
	background-repeat:no-repeat;
	background-position:right top;
	height:381px;
	width:621px;
}
.b3 {
	background-image:url('fonmpk_03.gif');
	background-repeat:no-repeat;
	background-position:left bottom;
	height:409px;
	width:659px;
}
.b4 {
	background-image:url('fonmpk_04.jpg');
	background-repeat:no-repeat;
	background-position:right bottom;
	height:409px;
	width:621px;
}
</style>
</head>
<body>
<table width="1280" height="790" border="0" cellpadding="0" cellspacing="0">
<tr><td><div class="b1"></div></td><td><div class="b2"></div></td></tr>
<tr><td><div class="b3"></div></td><td><div class="b4"></div></td></tr>
</table>
</body>
</html>

Изображение порезал на 4 кусочка, вывел их через таблицу,описав в css и использовав div. Теперь вопрос о том, как сделать резиновый фон :blink: И тут я встал...

Justnewone · December 4, 2009

Покажите реальный рисунок.

Gohhan · December 4, 2009

Работаю над этим для примера,оригинал:

По частям:

_http://ifolder.ru/15316085

Sign In

Резиновый слой с изображением

Question

Gohhan

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

Gohhan

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Gohhan

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Gohhan

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Gohhan

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information