v2.5.2
Giriş yap

CSS background-attachment Özelliği

CSS3

Kaydırma (scroll) işlemi olduğunda arkaplan görselinin nasıl davranacağı belirlenir. Sayfa ile birlikte kayabilir ya da sabit kalabilir.

Yapısı (Syntax)background-attachment: scroll | fixed | local
NOT
fixed değerini daha iyi anlamak için son demoya bakmayı unutmayın :)
Varsayılan Değer scroll
JavaScript Yapısı object.style.backgroundAttachment="fixed"
Animasyon Özellikleri Uygulanabilir Hayır (Daha fazla detay)

Değerler

Değer Açıklama Versiyon
scroll Arkaplan görseli eleman ile birlikte kayar. Varsayılan değerdir. CSS3
fixed Arkaplan görseli sayfa kaydırılsa bile sabit kalır. CSS3
local Arkaplan görseli eleman ile birlikte kayar. scroll değerinden farkı, belli bir genişlik ve yüksekliğe sahip elemanlarda bu işlemi yapmasıdır. CSS3

Örnekler

Uygulanan elemanda kaydırma işlemi olduğunda görselinde kayması için bir örnek

<div class="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis magna justo. In pulvinar, est in finibus placerat, orci nunc mollis nisi, sit amet condimentum nisl purus eget sem. Sed molestie nisl ex, id fringilla tortor condimentum interdum. Donec ac ante et lorem tempor mollis. Nullam tincidunt bibendum augue, non tempus purus ullamcorper at. Curabitur vitae tempor risus. Mauris quam leo, consectetur quis rutrum quis, dignissim sit amet quam. Sed eu ligula ante. Nullam quis viverra ipsum, non sollicitudin magna. Donec lacinia metus at nulla laoreet, a lacinia lacus ultricies. Maecenas non mauris magna. Maecenas tincidunt, sem vel efficitur hendrerit, dui dui iaculis purus, id varius felis velit sagittis ipsum. Phasellus in pretium justo, ac convallis mi.
    <br><br>
    Nunc vel pulvinar lectus. Aenean sodales sit amet erat eu maximus. Donec elementum suscipit ultrices. Nam blandit blandit sem nec dictum. Etiam vitae elit euismod, gravida leo non, volutpat odio. Sed dictum dolor id turpis condimentum porttitor. Proin placerat velit et aliquam aliquet. Vestibulum mattis purus justo. Mauris bibendum porta augue at convallis. Proin gravida vitae tortor molestie convallis. Sed facilisis nisi eu ligula volutpat, eget maximus erat vulputate. Praesent et lorem faucibus mauris ornare posuere. Phasellus a mi vitae magna elementum molestie et id libero. Aliquam vitae aliquet velit.
    <br><br>
    Fusce sem elit, porta non magna a, laoreet aliquam orci. Etiam nec tortor eu velit dapibus sodales. Etiam quis arcu nec eros dapibus convallis eget in turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tincidunt justo sed nunc dignissim venenatis vitae non nibh. Duis odio tortor, lacinia feugiat iaculis a, faucibus ut urna. Nulla facilisi. Fusce dapibus hendrerit lacus imperdiet vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum euismod est id maximus mollis. Vestibulum tristique orci suscipit nunc consequat viverra.
    <br><br>
    Integer orci purus, tincidunt ac ante at, vehicula ultricies nibh. Duis accumsan aliquam sem, in hendrerit erat facilisis nec. Sed euismod, ex sed porta ornare, dolor justo iaculis justo, nec tincidunt urna augue in erat. Sed et quam purus. Nullam felis dolor, congue at consequat in, pulvinar eget velit. Proin molestie justo in tortor sollicitudin molestie. Integer nec turpis ante.
    <br><br>
    Sed scelerisque sapien sed arcu ornare, sit amet convallis diam tincidunt. Quisque vel velit mauris. Nulla a risus facilisis, fringilla ante quis, ultrices libero. Quisque tristique efficitur nunc. Fusce egestas odio sem, quis vestibulum nibh porta rhoncus. Etiam tristique tincidunt velit vitae cursus. Quisque eget massa ac velit viverra mattis eu vitae ante. Aliquam erat volutpat.
</div>

<style>
    .box {
        width: 300px;
        height: 200px;
        background-image: url(https://www.sample-videos.com/img/Sample-jpg-image-100kb.jpg);
        background-attachment: local;
        overflow: auto;
    }
</style>

Kaydırma işleminde arkaplan görselini sabit kalması için bir örnek

<!doctype html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Başlık</title>
    <style>
    body {
        background-image: url(https://www.sample-videos.com/img/Sample-jpg-image-100kb.jpg);
        background-size: cover;
        background-attachment: fixed;
        overflow: auto;
        padding: 20px;
    }
</style>
</head>
<body>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis magna justo. In pulvinar, est in finibus placerat, orci nunc mollis nisi, sit amet condimentum nisl purus eget sem. Sed molestie nisl ex, id fringilla tortor condimentum interdum. Donec ac ante et lorem tempor mollis. Nullam tincidunt bibendum augue, non tempus purus ullamcorper at. Curabitur vitae tempor risus. Mauris quam leo, consectetur quis rutrum quis, dignissim sit amet quam. Sed eu ligula ante. Nullam quis viverra ipsum, non sollicitudin magna. Donec lacinia metus at nulla laoreet, a lacinia lacus ultricies. Maecenas non mauris magna. Maecenas tincidunt, sem vel efficitur hendrerit, dui dui iaculis purus, id varius felis velit sagittis ipsum. Phasellus in pretium justo, ac convallis mi.
    <br><br>
    Nunc vel pulvinar lectus. Aenean sodales sit amet erat eu maximus. Donec elementum suscipit ultrices. Nam blandit blandit sem nec dictum. Etiam vitae elit euismod, gravida leo non, volutpat odio. Sed dictum dolor id turpis condimentum porttitor. Proin placerat velit et aliquam aliquet. Vestibulum mattis purus justo. Mauris bibendum porta augue at convallis. Proin gravida vitae tortor molestie convallis. Sed facilisis nisi eu ligula volutpat, eget maximus erat vulputate. Praesent et lorem faucibus mauris ornare posuere. Phasellus a mi vitae magna elementum molestie et id libero. Aliquam vitae aliquet velit.
    <br><br>
    Fusce sem elit, porta non magna a, laoreet aliquam orci. Etiam nec tortor eu velit dapibus sodales. Etiam quis arcu nec eros dapibus convallis eget in turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tincidunt justo sed nunc dignissim venenatis vitae non nibh. Duis odio tortor, lacinia feugiat iaculis a, faucibus ut urna. Nulla facilisi. Fusce dapibus hendrerit lacus imperdiet vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum euismod est id maximus mollis. Vestibulum tristique orci suscipit nunc consequat viverra.
    <br><br>
    Integer orci purus, tincidunt ac ante at, vehicula ultricies nibh. Duis accumsan aliquam sem, in hendrerit erat facilisis nec. Sed euismod, ex sed porta ornare, dolor justo iaculis justo, nec tincidunt urna augue in erat. Sed et quam purus. Nullam felis dolor, congue at consequat in, pulvinar eget velit. Proin molestie justo in tortor sollicitudin molestie. Integer nec turpis ante.
    <br><br>
    Sed scelerisque sapien sed arcu ornare, sit amet convallis diam tincidunt. Quisque vel velit mauris. Nulla a risus facilisis, fringilla ante quis, ultrices libero. Quisque tristique efficitur nunc. Fusce egestas odio sem, quis vestibulum nibh porta rhoncus. Etiam tristique tincidunt velit vitae cursus. Quisque eget massa ac velit viverra mattis eu vitae ante. Aliquam erat volutpat.
    <br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis magna justo. In pulvinar, est in finibus placerat, orci nunc mollis nisi, sit amet condimentum nisl purus eget sem. Sed molestie nisl ex, id fringilla tortor condimentum interdum. Donec ac ante et lorem tempor mollis. Nullam tincidunt bibendum augue, non tempus purus ullamcorper at. Curabitur vitae tempor risus. Mauris quam leo, consectetur quis rutrum quis, dignissim sit amet quam. Sed eu ligula ante. Nullam quis viverra ipsum, non sollicitudin magna. Donec lacinia metus at nulla laoreet, a lacinia lacus ultricies. Maecenas non mauris magna. Maecenas tincidunt, sem vel efficitur hendrerit, dui dui iaculis purus, id varius felis velit sagittis ipsum. Phasellus in pretium justo, ac convallis mi.
    <br><br>
    Nunc vel pulvinar lectus. Aenean sodales sit amet erat eu maximus. Donec elementum suscipit ultrices. Nam blandit blandit sem nec dictum. Etiam vitae elit euismod, gravida leo non, volutpat odio. Sed dictum dolor id turpis condimentum porttitor. Proin placerat velit et aliquam aliquet. Vestibulum mattis purus justo. Mauris bibendum porta augue at convallis. Proin gravida vitae tortor molestie convallis. Sed facilisis nisi eu ligula volutpat, eget maximus erat vulputate. Praesent et lorem faucibus mauris ornare posuere. Phasellus a mi vitae magna elementum molestie et id libero. Aliquam vitae aliquet velit.
    <br><br>
    Fusce sem elit, porta non magna a, laoreet aliquam orci. Etiam nec tortor eu velit dapibus sodales. Etiam quis arcu nec eros dapibus convallis eget in turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tincidunt justo sed nunc dignissim venenatis vitae non nibh. Duis odio tortor, lacinia feugiat iaculis a, faucibus ut urna. Nulla facilisi. Fusce dapibus hendrerit lacus imperdiet vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum euismod est id maximus mollis. Vestibulum tristique orci suscipit nunc consequat viverra.
    <br><br>
    Integer orci purus, tincidunt ac ante at, vehicula ultricies nibh. Duis accumsan aliquam sem, in hendrerit erat facilisis nec. Sed euismod, ex sed porta ornare, dolor justo iaculis justo, nec tincidunt urna augue in erat. Sed et quam purus. Nullam felis dolor, congue at consequat in, pulvinar eget velit. Proin molestie justo in tortor sollicitudin molestie. Integer nec turpis ante.
    <br><br>
    Sed scelerisque sapien sed arcu ornare, sit amet convallis diam tincidunt. Quisque vel velit mauris. Nulla a risus facilisis, fringilla ante quis, ultrices libero. Quisque tristique efficitur nunc. Fusce egestas odio sem, quis vestibulum nibh porta rhoncus. Etiam tristique tincidunt velit vitae cursus. Quisque eget massa ac velit viverra mattis eu vitae ante. Aliquam erat volutpat.
    <br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis magna justo. In pulvinar, est in finibus placerat, orci nunc mollis nisi, sit amet condimentum nisl purus eget sem. Sed molestie nisl ex, id fringilla tortor condimentum interdum. Donec ac ante et lorem tempor mollis. Nullam tincidunt bibendum augue, non tempus purus ullamcorper at. Curabitur vitae tempor risus. Mauris quam leo, consectetur quis rutrum quis, dignissim sit amet quam. Sed eu ligula ante. Nullam quis viverra ipsum, non sollicitudin magna. Donec lacinia metus at nulla laoreet, a lacinia lacus ultricies. Maecenas non mauris magna. Maecenas tincidunt, sem vel efficitur hendrerit, dui dui iaculis purus, id varius felis velit sagittis ipsum. Phasellus in pretium justo, ac convallis mi.
    <br><br>
    Nunc vel pulvinar lectus. Aenean sodales sit amet erat eu maximus. Donec elementum suscipit ultrices. Nam blandit blandit sem nec dictum. Etiam vitae elit euismod, gravida leo non, volutpat odio. Sed dictum dolor id turpis condimentum porttitor. Proin placerat velit et aliquam aliquet. Vestibulum mattis purus justo. Mauris bibendum porta augue at convallis. Proin gravida vitae tortor molestie convallis. Sed facilisis nisi eu ligula volutpat, eget maximus erat vulputate. Praesent et lorem faucibus mauris ornare posuere. Phasellus a mi vitae magna elementum molestie et id libero. Aliquam vitae aliquet velit.
    <br><br>
    Fusce sem elit, porta non magna a, laoreet aliquam orci. Etiam nec tortor eu velit dapibus sodales. Etiam quis arcu nec eros dapibus convallis eget in turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tincidunt justo sed nunc dignissim venenatis vitae non nibh. Duis odio tortor, lacinia feugiat iaculis a, faucibus ut urna. Nulla facilisi. Fusce dapibus hendrerit lacus imperdiet vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum euismod est id maximus mollis. Vestibulum tristique orci suscipit nunc consequat viverra.
    <br><br>
    Integer orci purus, tincidunt ac ante at, vehicula ultricies nibh. Duis accumsan aliquam sem, in hendrerit erat facilisis nec. Sed euismod, ex sed porta ornare, dolor justo iaculis justo, nec tincidunt urna augue in erat. Sed et quam purus. Nullam felis dolor, congue at consequat in, pulvinar eget velit. Proin molestie justo in tortor sollicitudin molestie. Integer nec turpis ante.
    <br><br>
    Sed scelerisque sapien sed arcu ornare, sit amet convallis diam tincidunt. Quisque vel velit mauris. Nulla a risus facilisis, fringilla ante quis, ultrices libero. Quisque tristique efficitur nunc. Fusce egestas odio sem, quis vestibulum nibh porta rhoncus. Etiam tristique tincidunt velit vitae cursus. Quisque eget massa ac velit viverra mattis eu vitae ante. Aliquam erat volutpat.

</body>
</html>

Fixed değerinin daha iyi anlaşılacağı bir örnek

<!doctype html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Başlık</title>
    <style>
        .image {
            height: 200px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            overflow: auto;
        }
        .image.image1 {
            background-image: url(https://www.sample-videos.com/img/Sample-jpg-image-100kb.jpg);
        }
        .image.image2 {
            background-image: url(https://www.fillmurray.com/1280/720);
        }
    </style>
</head>
<body>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis magna justo. In pulvinar, est in finibus placerat, orci nunc mollis nisi, sit amet condimentum nisl purus eget sem. Sed molestie nisl ex, id fringilla tortor condimentum interdum. Donec ac ante et lorem tempor mollis. Nullam tincidunt bibendum augue, non tempus purus ullamcorper at. Curabitur vitae tempor risus. Mauris quam leo, consectetur quis rutrum quis, dignissim sit amet quam. Sed eu ligula ante. Nullam quis viverra ipsum, non sollicitudin magna. Donec lacinia metus at nulla laoreet, a lacinia lacus ultricies. Maecenas non mauris magna. Maecenas tincidunt, sem vel efficitur hendrerit, dui dui iaculis purus, id varius felis velit sagittis ipsum. Phasellus in pretium justo, ac convallis mi.
    <br><br>
    Nunc vel pulvinar lectus. Aenean sodales sit amet erat eu maximus. Donec elementum suscipit ultrices. Nam blandit blandit sem nec dictum. Etiam vitae elit euismod, gravida leo non, volutpat odio. Sed dictum dolor id turpis condimentum porttitor. Proin placerat velit et aliquam aliquet. Vestibulum mattis purus justo. Mauris bibendum porta augue at convallis. Proin gravida vitae tortor molestie convallis. Sed facilisis nisi eu ligula volutpat, eget maximus erat vulputate. Praesent et lorem faucibus mauris ornare posuere. Phasellus a mi vitae magna elementum molestie et id libero. Aliquam vitae aliquet velit.
    <br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis magna justo. In pulvinar, est in finibus placerat, orci nunc mollis nisi, sit amet condimentum nisl purus eget sem. Sed molestie nisl ex, id fringilla tortor condimentum interdum. Donec ac ante et lorem tempor mollis. Nullam tincidunt bibendum augue, non tempus purus ullamcorper at. Curabitur vitae tempor risus. Mauris quam leo, consectetur quis rutrum quis, dignissim sit amet quam. Sed eu ligula ante. Nullam quis viverra ipsum, non sollicitudin magna. Donec lacinia metus at nulla laoreet, a lacinia lacus ultricies. Maecenas non mauris magna. Maecenas tincidunt, sem vel efficitur hendrerit, dui dui iaculis purus, id varius felis velit sagittis ipsum. Phasellus in pretium justo, ac convallis mi.
    <br><br>
    Nunc vel pulvinar lectus. Aenean sodales sit amet erat eu maximus. Donec elementum suscipit ultrices. Nam blandit blandit sem nec dictum. Etiam vitae elit euismod, gravida leo non, volutpat odio. Sed dictum dolor id turpis condimentum porttitor. Proin placerat velit et aliquam aliquet. Vestibulum mattis purus justo. Mauris bibendum porta augue at convallis. Proin gravida vitae tortor molestie convallis. Sed facilisis nisi eu ligula volutpat, eget maximus erat vulputate. Praesent et lorem faucibus mauris ornare posuere. Phasellus a mi vitae magna elementum molestie et id libero. Aliquam vitae aliquet velit.
    <br><br>
    <div class="image image1"></div>
    <br><br>
    Fusce sem elit, porta non magna a, laoreet aliquam orci. Etiam nec tortor eu velit dapibus sodales. Etiam quis arcu nec eros dapibus convallis eget in turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tincidunt justo sed nunc dignissim venenatis vitae non nibh. Duis odio tortor, lacinia feugiat iaculis a, faucibus ut urna. Nulla facilisi. Fusce dapibus hendrerit lacus imperdiet vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum euismod est id maximus mollis. Vestibulum tristique orci suscipit nunc consequat viverra.
    <br><br>
    Integer orci purus, tincidunt ac ante at, vehicula ultricies nibh. Duis accumsan aliquam sem, in hendrerit erat facilisis nec. Sed euismod, ex sed porta ornare, dolor justo iaculis justo, nec tincidunt urna augue in erat. Sed et quam purus. Nullam felis dolor, congue at consequat in, pulvinar eget velit. Proin molestie justo in tortor sollicitudin molestie. Integer nec turpis ante.
    <br><br>
    <div class="image image2"></div>
    <br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis magna justo. In pulvinar, est in finibus placerat, orci nunc mollis nisi, sit amet condimentum nisl purus eget sem. Sed molestie nisl ex, id fringilla tortor condimentum interdum. Donec ac ante et lorem tempor mollis. Nullam tincidunt bibendum augue, non tempus purus ullamcorper at. Curabitur vitae tempor risus. Mauris quam leo, consectetur quis rutrum quis, dignissim sit amet quam. Sed eu ligula ante. Nullam quis viverra ipsum, non sollicitudin magna. Donec lacinia metus at nulla laoreet, a lacinia lacus ultricies. Maecenas non mauris magna. Maecenas tincidunt, sem vel efficitur hendrerit, dui dui iaculis purus, id varius felis velit sagittis ipsum. Phasellus in pretium justo, ac convallis mi.
    <br><br>
    Nunc vel pulvinar lectus. Aenean sodales sit amet erat eu maximus. Donec elementum suscipit ultrices. Nam blandit blandit sem nec dictum. Etiam vitae elit euismod, gravida leo non, volutpat odio. Sed dictum dolor id turpis condimentum porttitor. Proin placerat velit et aliquam aliquet. Vestibulum mattis purus justo. Mauris bibendum porta augue at convallis. Proin gravida vitae tortor molestie convallis. Sed facilisis nisi eu ligula volutpat, eget maximus erat vulputate. Praesent et lorem faucibus mauris ornare posuere. Phasellus a mi vitae magna elementum molestie et id libero. Aliquam vitae aliquet velit.
    <br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis magna justo. In pulvinar, est in finibus placerat, orci nunc mollis nisi, sit amet condimentum nisl purus eget sem. Sed molestie nisl ex, id fringilla tortor condimentum interdum. Donec ac ante et lorem tempor mollis. Nullam tincidunt bibendum augue, non tempus purus ullamcorper at. Curabitur vitae tempor risus. Mauris quam leo, consectetur quis rutrum quis, dignissim sit amet quam. Sed eu ligula ante. Nullam quis viverra ipsum, non sollicitudin magna. Donec lacinia metus at nulla laoreet, a lacinia lacus ultricies. Maecenas non mauris magna. Maecenas tincidunt, sem vel efficitur hendrerit, dui dui iaculis purus, id varius felis velit sagittis ipsum. Phasellus in pretium justo, ac convallis mi.
    <br><br>
    Nunc vel pulvinar lectus. Aenean sodales sit amet erat eu maximus. Donec elementum suscipit ultrices. Nam blandit blandit sem nec dictum. Etiam vitae elit euismod, gravida leo non, volutpat odio. Sed dictum dolor id turpis condimentum porttitor. Proin placerat velit et aliquam aliquet. Vestibulum mattis purus justo. Mauris bibendum porta augue at convallis. Proin gravida vitae tortor molestie convallis. Sed facilisis nisi eu ligula volutpat, eget maximus erat vulputate. Praesent et lorem faucibus mauris ornare posuere. Phasellus a mi vitae magna elementum molestie et id libero. Aliquam vitae aliquet velit.
    <br><br>
    Sed scelerisque sapien sed arcu ornare, sit amet convallis diam tincidunt. Quisque vel velit mauris. Nulla a risus facilisis, fringilla ante quis, ultrices libero. Quisque tristique efficitur nunc. Fusce egestas odio sem, quis vestibulum nibh porta rhoncus. Etiam tristique tincidunt velit vitae cursus. Quisque eget massa ac velit viverra mattis eu vitae ante. Aliquam erat volutpat.

</body>
</html>

Tarayıcı Desteği

  Chrome Firefox Edge Internet Explorer Opera Safari
background-attachment 1 1 12 4 3.5 1
local 1 25 12 9 10.5 5
multiple_backgrounds 1 3.6 12 9 10.5 1.3
Destekliyor
Desteklemiyor
tayfunerbilen
1224 gün önce eklendi - 3038 kez görüntülendi.
Github'da Düzenle
Önceki animation Sonraki writing-mode