Изображение, разлитое за пределами div

Question

У меня есть изображение, анимирующее справа налево ... Изображение шириной 6000 пикселей, чтобы увеличить продолжительность анимации. Я поместил изображение (cloud-layer-2.png) в div (layer-2-container) и использовал следующий CSS, надеясь, что изображение не будет проливаться на div, создавая горизонтальную прокрутку. Но, к сожалению, он не работает, и у меня есть горизонтальный прокруток на 6000 пикселей.

.layer-2-container { 
width: auto; 
overflow-y: scroll; 
overflow-x: hidden; 
z-index: 2; 
} 

Этот вид можно посмотреть по адресу: http://www.mike-griffin.com/testing. Если вы используете CMD/CTRL + A, чтобы выбрать все, вы сможете увидеть облака лучше, если это поможет.

Я также вложу весь код ниже.

-HTML-

<section class="home-section"> 

    <div class="navigation"> 
    <nav> 
    <ul> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li><a href="#">Link 3</a></li> 
    </ul> 
    </nav> 
    </div><!--navigation--> 

    <div class="creative-designer"> 
    <h2>| Heading one |</h2> 
    </div> 

    <div class="home-section-layers"> 

    <img class="layer-1" src="img/white-M-layer-3.jpg" width="" height=""> 

    <div class="layer-2-container"> 
    <img class="layer-2" src="img/clouds-layer-2.png" width="" height=""> 
    </div><!--layer-2-container--> 
    </div><!--home-section-layers--> 

    </section><!--home-section--> 


    </div><!--container--> 

-CSS-

.container { 
width: 100%; 
height: auto; 
max-width: 100%; 
} 

.home-section { 
width: 100%; 
height: auto; 
position: absolute; 
} 

.layer-1 { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: auto; 
/*margin-top: -10%;*/ 
z-index: 1; 

} 

.layer-2-container { 
width: auto; 
overflow-y: scroll; 
overflow-x: hidden; 
z-index: 2; 
} 

.layer-2 { 
position: absolute; 
z-index: 2; 
width: auto; 
height: auto; 
top: 0; 
} 

.creative-designer { 
text-align: center; 
position: relative; 
z-index: 5; 
color: #666; 
margin-top: 40%; 
} 

.navigation { 
color: #0C98D6; 
position: relative; 
z-index: 10; 
top: 0px; 
} 

.navigation ul { 
list-style: none; 
width: 100%; 
padding-right: 5%; 
float: right; 
} 

.navigation ul li { 
float: right; 
padding: 10px; 
} 

Спасибо за любую помощь на всех.

Answer 1

В духе переполнения стека я точно отвечаю на ваш вопрос.

.home-section { 
    overflow-x: hidden; 
} 

Я хотел бы подчеркнуть, однако, что этот сайт действительно тяжелый, и вы должны закодировать это такое, что не будет проблем нагрузки на мобильном телефоне. Вы можете разделить облака пополам и/или использовать SVG (M также должен быть SVG). Кроме того, ваши облака будут перекрывать содержимое, если вы решите добавить материал по бокам, поэтому вам может понадобиться установить радиус границы, чтобы круг обрезал облака.

Только предложения, но надеюсь, что они помогут!