Jump to content
  • 0

Фон: растянуть и фиксировать!


Matoka Kusanage
 Share

Question

Извините, знаю что эта тема уже поднималась, но там не все ссылки работают. Я новичок, поэтому сразу прошу-подробнее!!!

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

Ещё раз извините за тему, которую поднимает, наверное, каждый новичок, но я вам торжественно обещаю, что если вы меня научите, когда я подучусь, то напишу учебник и вас больше не будут мучать этим вопросом)))Заранее спасибо!!

Всё бы ничего, но в ие вот это не работает:

<html>

<head>

<title>Математика для народа</title>

<style type="text/css">

body

#layer1 {

z-index: 1; /* Порядок слоев */

width: 100%; /* Ширина слоя с фоном */

height: 100%; /* Высота слоя с фоном */

position: fixed; /* Абсолютное позиционирование */

left: 0; /* Положение от левого края окна */

right: 0;

top: 0; /* Положение от верхнего края */

bottom: 0;

}

#layer2 {

position: absolute;

z-index: 2;

width: 100%;

}

</style>

</head>

<body topmargin="0" leftmargin="0" rightmargin="0" link="#000000" alink="#000000" vlink="#000000" >

<div id="layer1">

<img src="back.jpg" width="100%" alt="">

</div>

<div id="layer2">

<br>

<br>

<center><table width="700" border="0" cellspacing="0" cellpadding="0">

<tr><td><img src="top.png"></td></tr>

<tr><td background="bord.png">

<table width="700" border="0" cellspacing="0" cellpadding="0"><tr><td width="20"></td><td>

<p align="justify">

контент

</div>

</body>

</html>

Edited by Matoka Kusanage
Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Ща, уно моменто. Во всех страницах прописана вышеуказанная конструкция.

первый:

1.jpg

второй:

2.jpg

третий:

3.jpg

Итак

Дано: довольно большая картинка (по крайней мере больше моего экрана) с изображением моего рабочего стола. Приведенная конструкция относится только к нижнему фрейму.

Нужно:

1)сделать, чтобы фоновая картинка по ширине растягивалась/сжималась на 100% ширины экрана.

2)зафиксировать фон: контент прокручивается, а фон нет.

Возникли следущие проблемы:

1)На 3-ем скриншоте показано как это отображает Интернет-Эксплорер. Забить или исправить? Если исправить, то как?

2)На первом скриншоте, где контента мало всё вообще идиально (ну за исключением Интернет эксплорерной интерпритации). А вот если контента больше странички, как на втором скриншоте, появляется полоса прокрутки (понятное дело это так и должно быть), но вот появляется маленькая беленькая полосочка между нижним краем фона и нижней границей поля браузера. В остальном, во всех браузерах кроме ИЕ все желания сбылись.

Edited by Matoka Kusanage
Link to comment
Share on other sites

  • 0

Вроде ща сделала всё, но проблема в ие так и не решена. как мне кажется это связано с тем, что не распознаётся команда position: fixed. Однако, у меня ие старше 6. Так что странно. Как это вообще делается цивиллизованно?

Edited by Matoka Kusanage
Link to comment
Share on other sites

  • 0

Под какие браузеры вообще верстаете? На ИЕ с какого надо?

Ваш код работает нормально - в 7,8,9 фон на месте, контент крутится. Никаких линий нигде нет. Вы про доктайп не забыли?

Link to comment
Share on other sites

  • 0

Простите, пожалуйста, за нубство, но что есть доктайп? Я ща с полосочкой разобралась, растянув фоновый слой на 100% по высоте, полоска пропала. Проблема только с интернет эксплорером. Вообще, то что вы мне сказали, меня сильно удивило, у меня версия старше 6 это точно, а в ней не пашет!!!! у меня 8 ИЕ. Ща еще раз всё проверю аккуратно. Если вас не затруднит про доктайп поподробнее пожалуйста. :blink:

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy