2014-01-31 2 views
0

У меня есть простой 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% -ной ссылки.

ответ

4

I tihnk проблема заключается в том, что это background-attachment: fixed;, если вы удалите ее, изображение выравнивается отлично вправо.

http://jsfiddle.net/j2MWX/2/

+0

Ahh - вы правы. К сожалению, хотя мы используем это в реализации параллакса, нам нужно фиксированное вложение - по крайней мере, так, как мы это делаем сейчас. Я посмотрю, смогу ли я вернуть его в положение 0/0 и использовать JS для его правильного изменения в зависимости от ширины браузера ... –

Смежные вопросы