2016-01-21 1 views
0

Я создаю страницу прокрутки параллакса.
Все работает нормально, пока я не открою страницу на смартфоне.Отзывчивая смена прокрутки Parallax на медиа-запрос

У меня есть медиа-запросы для изменения макета.
Вот установка:

<div class="full_width_parallax"> 
    <div class="wrap_1280"> 
     <h1 class="intro-tagline"> 
      Content here 
     </h1> 
     </div> 
</div> 

CSS-(для настольной версии):

.full_width_parallax{ 
background:url(images/parallax-background/option-1.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

.wrap_1280{ 
padding: 0 3% 0 3%; 
background: #FFF; 
opacity: 0.6; 
margin: 0 70% 0 3%; 
} 

CSS-(для мобильных версий max-width:480px)

.full_width_parallax{ 
background:url(images/parallax-background/option-2.jpg) no-repeat center center fixed; 
} 
.wrap_1280{ 
margin: 0 3% 0 3%; 
} 

Так что единственное изменения для мобильная версия - фоновое изображение и маржа. Если я проверить мобильную версию в хромированная (рабочий стол) и запустить консоль это дает мне:

enter image description here

Так оно и должно работать, но не делает.
Любые идеи?

ответ

0

Хорошо. Я - самая тупая задница в этот момент ...

Таблица стилей для мобильной версии находится в папке.
Ссылка в CSS для фонового изображения не было правильного пути ...

background:url(images/parallax-background/option-2.jpg) no-repeat center center fixed;

Должно быть:
background:url(../images/parallax-background/option-3.jpg) no-repeat center center fixed;