Позиционирование background изображения - HTML и CSS

memo999 · 30.05.2012, 11:37

Вопрос по прилагаемым HTML и CSS файлам.
Почему не совпадает координаты окончания первого столбца и начала фоновой (background) картинки (на оси х)? Первый (left) столбец задан до 20%, начало background-position тоже 20%, но первый (left) столбец получается шире, чем начало фоновой картинки. Этот левый столбец залазит на фоновую картинку, ок. 30px. Почему так?

Код HTML:

<body>
<div id='wrapper'>
               <div id='left'>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
               </div>
               <div id='right'>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
               </div>
               <div id='center'>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
   ut aliquip ex ea commodo consequat.
               </div>
       <div class='clear'></div>
</div>
</body>

Код:

html, body {margin:0;height:100%;}
       #wrapper {
       height:auto !important;height:100%;min-height:100%;min-width:800px;
 
       background-image: url(../images/tabs.png);
       background-position: 20% 0%;
       background-repeat: no-repeat;
       }
      #left {float:left;width:20%;background: #fd0;border: 1px solid black;}
      #right {float:right;width:20%;background: #fd0;border: 1px solid black;}
      #center {margin:0 20% 0 20%;background: #fd0;border: 1px solid black;}
      .clear {clear:both;}

Naive · 30.05.2012, 12:07

Позиционирование фона в % зависит не только от размеров блока, но и от размеров изображения.
На черте 20% слева от блока будет черта изображения на 20% от этого изображения.
Т.е. если прописать 100% для позиционирования, то будет выравнивание по правому краю.

memo999 · 30.05.2012, 12:17

Цитата:

Сообщение от Naive

Позиционирование фона в % зависит не только от размеров блока, но и от размеров изображения.
На черте 20% слева от блока будет черта изображения на 20% от этого изображения.
Т.е. если прописать 100% для позиционирования, то будет выравнивание по правому краю.

Спасибо! Понял в чём фишка

Видимо, должна быть какая-то формула или метод по которому можно было бы картинку фона двигать соответственно столбцам, сделанным с помощью float, примерно, как в моём случае.

Как это лучше сделать?

Naive · 30.05.2012, 12:21

либо вложенностью блоков со статичным расположением бэк-граунда, либо js:
считаем сколько в пикселях 20% от блока и впинываем значение напрямую в стили

memo999 · 30.05.2012, 13:37

Цитата:

Сообщение от Naive

либо вложенностью блоков со статичным расположением бэк-граунда, либо js:
считаем сколько в пикселях 20% от блока и впинываем значение напрямую в стили

подумалось, если css подсчитывает, напр., 20 проц. отодвижения картинки фона, то, учитывая возможность измерения, может быть есть возможность употреблять те значения, которыми оперирует сам css...

30.05.2012, 12:07	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Позиционирование фона в % зависит не только от размеров блока, но и от размеров изображения. На черте 20% слева от блока будет черта изображения на 20% от этого изображения. Т.е. если прописать 100% для позиционирования, то будет выравнивание по правому краю. Alar, верни репу!

30.05.2012, 12:21	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	либо вложенностью блоков со статичным расположением бэк-граунда, либо js: считаем сколько в пикселях 20% от блока и впинываем значение напрямую в стили Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
background	pavelslap	HTML и CSS	2	14.01.2012 03:44
background onclick	pavelslap	HTML и CSS	2	11.05.2011 00:02
Background HTML	Guzal	HTML и CSS	10	30.11.2010 20:23
CSS Background	bill	HTML и CSS	1	28.10.2010 22:03