Добавление изображения поверх div с цветом BG

Question

Так что я впервые использую Square Space для создания веб-сайта для моей свадьбы.

Прямо сейчас, когда вы прокручиваете страницу на главной странице, есть прокрутка параллакса, которая появляется, чтобы открыть следующий раздел. Это то, что он выглядит следующим образом:

Вместо того, что жесткую линию, которая является контейнером содержимого следующего Div, я хотел бы добавить еще один ряд деревьев на вершине, что Див так это будет выглядеть что-то вроде этого:

Тогда деревья движутся вверх и от экрана, как вы прокрутите вниз.

До сих пор, похоже, я могу настроить CSS, а не фактические файлы HTML. Я не уверен, как это сделать в CSS.

Когда я проверить DIV, это то, что приходит в CSS:

#content-wrapper .content { 
width: 100%; 
background-color: #54535f; 
position: relative; 
z-index: 50; 
} 
.content.has-main-image { 
box-shadow: 0 0 75px rgba(0,0,0,.1); 
} 

Может кто-нибудь помочь с кодом для этого? Я мог бы легко сделать это, если бы у меня был доступ к HTML, и я мог бы просто создать другой div, но я понятия не имею, как это сделать с помощью CSS.

Спасибо!

Answer 1

Один из способов сделать это - создать отдельный слой для темных деревьев, как описано в комментариях. Поскольку вы не можете изменить структуру HTML, мы создадим pseudo selector для div #content-wrapper .content, который по существу будет фоном, который получает темные деревья, а тело получает фон без деревьев.

Первый шаг - изменение фона тела на изображение без темных деревьев.

Затем добавьте этот CSS:

#content-wrapper .content:before { 
    content: ""; /* required for psuedo selectors to work */ 
    display: block; /* makes sure element is a block box */ 
    position: absolute; /* make sure element does not affect layout */ 
    left: 0; right: 0; width: 100%; /* makes sure element stretches */ 
    height: 400px; 
    top: -350px; /* offset element from content box so it appears above it */ 
    z-index: -1; /* make sure element does it overlap other elements */ 
    background: url(http://i.imgur.com/xx72pbB.png) no-repeat 50% 44%; 
    background-size: cover; 
} 

Кроме того, я заметил, что background-color в содержательных коробках не соответствуют темный цвет деревьев, правильное значение должно быть: #585862

#content-wrapper .content { 
    width: 100%; 
    background-color: #585862; /* was #51535c */ 
    position: relative; 
    z-index: 1; /* was 50, change to 1 to prevent overlapping */ 
} 

.content-inner { 
    background-color: #585862; /* was #51535c */ 
    max-width: 960px; 
    margin: 0 auto; 
    padding: 100px 8%; 
} 

---

Доходы

• Сохраняет эффект параллакса
• Нет модификации структуры HTML глубины
• Прибавляет

Против

• Незначительное увеличение времени загрузки страницы (начиная с создания двух запросов HTTP)

---

Конечный результат должен выглядеть следующим образом: