Проблемы с выравниванием изображений с фиксированным фоном

Question

Непонятно, как правильно сформулировать вопрос в первую очередь здесь, но я отдам его.

У меня есть изображение, которое я хочу прокрутить вниз по странице, что я хочу изменить цвет плавно, когда он входит во второй div с другим цветным фоном. У меня есть сортировка разделов, изображения идеально подобраны и эффект, который я хочу работать превосходно - моя единственная проблема сейчас в том, что я не могу выровнять два изображения для жизни меня из-за использования процентов и т. Д.

У меня есть рабочий пример здесь вам обязательно нужно посмотреть - jsFiddle - вам может потребоваться немного изменить размер страницы, чтобы понять конкретную проблему выравнивания, которую я имею. Верхний «Привет» занимает установленную сумму вне центра, чего я хочу достичь со вторым «Привет». Я просто не могу добиться этого! Какие-либо предложения? Я рассматривал возможные решения jQuery, но пока не повезло.

Спасибо за кучи за любые ответы. Приветствия.

Answer 1

Хорошо. Кажется, я нашел решение, хотя я бы не назвал его идеальным. Это хорошо работает! После того, как Чад сказал, чтобы попробовать background-position: left center;, я понял, что просто поставил изображение как background-position: center; и сделал изображение с кучей пустого места в одну сторону, с достаточным количеством вертела на фотошопе. Мне удалось бы выровнять два. Отлично работает сейчас, прекрасно сочетается во всех моих браузерах.

Вот пример - jsFiddle (хотя вы не можете увидеть много изменений в нем, так как это само изображение, которое должно было быть изменено.)

Спасибо за ответы, ребята.

Answer 2

Живая демо ссылка здесьhttp://jsfiddle.net/EtJBn/107/

Привет, теперь вы можете легко сделать это

Просто определить некоторые свойства, как этот

Css

html, body { 
    height:100%; 
} 

#top{ 
    height:100%; 
    width:100%; 
} 

#bottom{ 

    height:100%; 
    width:100%; 
    background-color:black; 
    z-index:200; 
} 

#topsq { 
    position:fixed; 
    height:175px; 
    background:url("http://mattwaymouth.com/images/hello_small.png") no-repeat center top; 
    left:0; 
    top:50px; 
    right:0; 
    z-index:1; 


}  

#second { 
    position:relative; 
    background: url("http://mattwaymouth.com/images/hello_small_green.png") no-repeat center 50px fixed;   
    left:0; 
    top:0; 
    right:0; 
    z-index: 200; 
     height:300px; 
} 

HTML

<div id="top"> 
    <div id="topsq"></div> 
</div> 

<div id="bottom"> 
    <div id="second"></div> 
</div> 

Живой демонстрационныйhttp://jsfiddle.net/EtJBn/107/