Форум PHP программистов > фон по разрешению экрана

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Avro

1.03.2011 - 00:47

Доброго времени суток. Столкнулся с проблемой масштабирования бекграунда. Он имеет разрешение 1660Х1149пыхы. Изображение должно масштабироваться в зависимости от разрешения экрана со всем контентом. Задавал в body, html и #wrapper 100%. При уменьшении разрешения проблем нет, а при увеличении картинка плывет влево, оставляя справа белую полосу с блоками. Съезжает именно background! Помогите, нужно срочно!
*
{
margin:0;
padding:0;
}

html,body
{
height:100%;
width:100%;
margin:0px;
padding: 0px;
font-size: 11px;
font-family: tahoma;
}

table
{
border:0px;
border-collapse:collapse;
}

#wrapper
{
text-align:center;
position: relative; top: 0px; left: 0px; z-index: 1; width: 100%;
background-position:top;
min-height:1149px;
height:100%;
margin:0 auto;
background-image:url(..//images/background1.png);
background-repeat:no-repeat;
background-color:#abe2ea;
}

Спустя 6 минут, 14 секунд (28.02.2011 - 23:53) inpost написал(а):

Avro
Непонятно, покажи на скрин-шотах, что сейчас и как должно быть.

Спустя 16 минут, 14 секунд (1.03.2011 - 00:10) Guest написал(а):

как залить изображение?

Спустя 24 минуты, 2 секунды (1.03.2011 - 00:34) Evilsoul написал(а):

У тебя здесь ошибка на ошибке, откуда вообще такое?

*
{
margin:0;
padding:0;
}

html,body
{
height:100%; // зачем это?
width:100%; // зачем это?
margin:0px; //зачем здесь прописывать эти параметры, 
padding: 0px; // ты их применил ко всему документу выше
font-size: 11px;
font-family: tahoma;
}

table
{
border:0px;
border-collapse:collapse;
}


#wrapper
{
text-align:center;
position: relative; top: 0px; left: 0px; z-index: 1; width: 100%; // зачем зет-индекс, если это бэкграунд, то он должен быть ниже всего остального...
background-position:top; // ты же выставил позицию, выше, зачем и здесь это?
min-height:1149px;
height:100%;
margin:0 auto; // в позиции пишешь слева а здесь выравниваешь по центу? - нонсенс
background-image:url(..//images/background1.png); // не принципиально, но аккуратнее было бы записать это всё в одну строку.
background-repeat:no-repeat;
background-color:#abe2ea;
}

вот:

*
{
margin:0;
padding:0;
}

html,body
{
font-size: 11px;
font-family: tahoma;
}

table
{
border:0px;
border-collapse:collapse;
}


#wrapper
{
text-align:center;
position: relative; 
width: 100%;
height:100%;
min-height:1149px;
background: #abe2ea url(..//images/background1.png) no-repeat; 
}

Спустя 39 минут, 9 секунд (1.03.2011 - 01:13) Avro написал(а):

Согласен, сварганил быдлокод, но как-то работает.... Почему-то при вставке вашего кода картинка разъезжается еще и при уменьшении разрешения... Наверное проявляются ошибки в коде далее.
P.S. первый проект

Быстрый ответ:

Здесь расположена полная версия этой страницы.