Here is the link http://www.royrobson.com/ru/o-kompanii/ How to make the pictures also be the background and only the view area with text blocks scrolled?

  • this effect is called Parallax - soledar10

2 answers 2

You need to put a picture for the block on the background and set the background-attachment: fixed; Here is a small example made:

http://codepen.io/prevolley/pen/jrErvX?editors=1100

background: url("http://lorempixel.com/600/400") no-repeat; background-attachment: fixed;

A bit clumsy, but the principle itself will be clear

  • Thank! This is exactly what I was looking for! - Andriy Babaritsky

Did this:

 <div id="separator_2" class="separator1"> <div class="bg3 bg"></div> <p class="separator"></p> </div>

css:

 @media only screen and (min-width: 1100px) { .separator1 .bg, .back-image .bg, .back-contact .bg, #intro .bg1 { background-attachment: fixed !important; } } /* #Separators ================================================== */ p.separator { font-size: 30px; font-weight: 600; font-style: italic; color: #fff; line-height: 38px; text-transform: uppercase; position: relative; z-index: 200; text-align: center; padding-top: 240px; } .separator1 { width: 100%; height: 300px; position: relative; } .separator1 .bg { background: url(../images/vodopad.jpg) repeat center; background-size: cover !important; -webkit-background-size: cover !important; margin: 0 auto; padding: 0; position: absolute; z-index: 200; width: 100%; height: 300px; } .separator1 .bg3 { background: url(../images/raduga.jpg) repeat center; background-image: url('https://raw.githubusercontent.com/.........jpg') }