У меня есть простой div с шириной менее 100%, с фоновым изображением с фоновой позицией 100% 0. Вместо изображения bg, прилипающего к правой стороне из div, он обрезается и, кажется, думает, что его фактическое правильное положение - это край тела, а не div, фон которого он есть.CSS background-position 100% (справа) работает не так, как ожидалось
.bg {
width:80%;
height:500px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 100% 0;
background-size: 50%;
background-image: url(http://www.blackitty.net/photographs/photos/slideshow/slide/133/Tofino_2013-11-24.jpg);
}
Я сделал скрипку для него: http://jsfiddle.net/bobmeador/j2MWX/ Верхний элемент показывает проблему. Ниже приведено полное изображение, чтобы вы могли видеть, что отключается.
Любая идея, почему она, кажется, использует родителя для его позиционирования, а не для div, к которому он принадлежит?
У меня такой же результат, когда мой .bg div установлен на ширину 100%, и он находится внутри div, равного 80% ширины. Кажется, что он игнорирует любую ширину контейнера и просто использует общую ширину корпуса для 100% -ной ссылки.
Ahh - вы правы. К сожалению, хотя мы используем это в реализации параллакса, нам нужно фиксированное вложение - по крайней мере, так, как мы это делаем сейчас. Я посмотрю, смогу ли я вернуть его в положение 0/0 и использовать JS для его правильного изменения в зависимости от ширины браузера ... –