CSS background-attachment — прокручування тла

HTML

<h2><code>scroll (default)</code></h2>
<div class="scroll"><div class="expand"></div></div>

<h2><code>fixed</code></h2>
<div class="fixed"><div class="expand"></div></div>

<h2><code>local</code></h2>
<div class="local"><div class="expand"></div></div>

<br class="extra-space">

CSS

h2 {
  text-align: center;
  margin-top: 48px;
}

div {
  height: 200px;
  width: 50%;
  max-width: 600px;
  margin: 32px auto;
  overflow-x: hidden;
  overflow-y: scroll;
}

.scroll {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
  background-attachment: scroll;
}

.fixed {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

.local {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
  background-attachment: local;
}

.expand {
  height: 400px;
  width: 100%;
}

.extra-space {
  margin-bottom: 50px;
}

HTML

<figure>
    <div class="box scroll">
        <p>Гортай цей блок і дивись на логотип позаду тексту.
        Тло прикріплене до елемента, тому воно лишається нерухомим,
        хоч би скільки рядків проїхало повз нього.
        Перший рядок. Другий рядок. Третій рядок. Четвертий рядок.
        П'ятий рядок. Шостий рядок. Сьомий рядок. Восьмий рядок.</p>
    </div>
    <figcaption>scroll</figcaption>
</figure>

<figure>
    <div class="box local">
        <p>Гортай цей блок і дивись на логотип позаду тексту.
        Тло прикріплене до вмісту, тому воно поїде вгору разом
        із текстом і зникне за верхнім краєм.
        Перший рядок. Другий рядок. Третій рядок. Четвертий рядок.
        П'ятий рядок. Шостий рядок. Сьомий рядок. Восьмий рядок.</p>
    </div>
    <figcaption>local</figcaption>
</figure>

CSS

figure {
    display: inline-block;
    margin: 0 16px 0 0;
    font: 12px monospace;
    text-align: center;
}

.box {
    width: 200px;
    height: 170px;
    overflow: auto;
    border: 2px solid #0172ad;
    background-image: url(/img/logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 130px;
}

.box p {
    margin: 0;
    padding: 8px;
    font: 13px/1.7 sans-serif;
    text-align: left;
}

.scroll {
    background-attachment: scroll;
}

.local {
    background-attachment: local;
}

HTML

<div class="container">
  <h1>При прокручуванні сторінки, тло не буде прокручуватися разом з вмістом</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>

CSS

body {
			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
			background-attachment: fixed;
		}

		.container {
			height: 800px;
			color: #fff;
			font-family: sans-serif;
			font-size: 17px;
			width: 1920px;
		}

HTML

<h4>Властивість <code>background-attachment</code></h4>

<p>У цьому прикладі Ви бачите два блоки з фоновим зображенням. Для лівого блоку застосоване значення <strong>local</strong> для <code>background-attachment</code>, а для правого - <strong>fixed</strong>.</p>

<p>Тобто фон у лівому блоці прокручується тільки всередині цього блоку, але не разом з усією сторінкою, а у другому блоці фон взагалі не прокручується.</p>

<div class="demo">
	<div class="block local">
	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
    elit. Aenean commodo ligula eget dolor. Aenean massa 
    <strong>strong</strong>. Cum sociis natoque penatibus 
    et magnis dis parturient montes, nascetur ridiculus 
    mus. Donec quam felis, ultricies nec, pellentesque 
    eu, pretium quis, sem. Nulla consequat massa quis 
    enim. Donec pede justo, fringilla vel, aliquet nec, 
    vulputate eget, arcu. In enim justo, rhoncus ut, 
    imperdiet a, venenatis vitae, justo. Nullam dictum 
    felis eu pede <a class="external ext" href="#">link</a> 
    mollis pretium. Integer tincidunt. Cras dapibus. 
    Vivamus elementum semper nisi. Aenean vulputate 
    eleifend tellus. Aenean leo ligula, porttitor eu, 
    consequat vitae, eleifend ac, enim. Aliquam lorem ante, 
    dapibus in, viverra quis, feugiat a, tellus. Phasellus 
    viverra nulla ut metus varius laoreet. Quisque rutrum. 
    Aenean imperdiet. Etiam ultricies nisi vel augue. 
    Curabitur ullamcorper ultricies nisi.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
    elit. Aenean commodo ligula eget dolor. Aenean massa. 
    Cum sociis natoque penatibus et magnis dis parturient 
    montes, nascetur ridiculus mus. Donec quam felis, 
    ultricies nec, pellentesque eu, pretium quis, sem.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
    elit. Aenean commodo ligula eget dolor. Aenean massa. 
    Cum sociis natoque penatibus et magnis dis parturient 
    montes, nascetur ridiculus mus. Donec quam felis, 
    ultricies nec, pellentesque eu, pretium quis, sem.</p>
	</div>
	<div class="block fixed">
	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
    elit. Aenean commodo ligula eget dolor. Aenean massa 
    <strong>strong</strong>. Cum sociis natoque penatibus 
    et magnis dis parturient montes, nascetur ridiculus 
    mus. Donec quam felis, ultricies nec, pellentesque 
    eu, pretium quis, sem. Nulla consequat massa quis 
    enim. Donec pede justo, fringilla vel, aliquet nec, 
    vulputate eget, arcu. In enim justo, rhoncus ut, 
    imperdiet a, venenatis vitae, justo. Nullam dictum 
    felis eu pede <a class="external ext" href="#">link</a> 
    mollis pretium. Integer tincidunt. Cras dapibus. 
    Vivamus elementum semper nisi. Aenean vulputate 
    eleifend tellus. Aenean leo ligula, porttitor eu, 
    consequat vitae, eleifend ac, enim. Aliquam lorem ante, 
    dapibus in, viverra quis, feugiat a, tellus. Phasellus 
    viverra nulla ut metus varius laoreet. Quisque rutrum. 
    Aenean imperdiet. Etiam ultricies nisi vel augue. 
    Curabitur ullamcorper ultricies nisi.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
    elit. Aenean commodo ligula eget dolor. Aenean massa. 
    Cum sociis natoque penatibus et magnis dis parturient 
    montes, nascetur ridiculus mus. Donec quam felis, 
    ultricies nec, pellentesque eu, pretium quis, sem.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
    elit. Aenean commodo ligula eget dolor. Aenean massa. 
    Cum sociis natoque penatibus et magnis dis parturient 
    montes, nascetur ridiculus mus. Donec quam felis, 
    ultricies nec, pellentesque eu, pretium quis, sem.</p>
	</div>
</div>

CSS

* {
	box-sizing: border-box;
}
	
body {
	font-family: sans-serif;
	line-height: 1.45;
	font-size: 18px;
	padding: 16px 16px 0 16px;
}

h4 {
	color: #4f4f4f;
	font-weight: 400;
  text-align: center;
}

.demo {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.block {
	width: 45%;
  padding: 8px;
	height: 350px;
	border: 8px solid #4f4f4f;
	font-family: monospace;
	line-height: 1.45;
	font-size: .8em;
	color: #000;
  overflow-y: scroll;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

.local { background-attachment: local; }
.fixed { background-attachment: fixed; }