CSS background-attachment

The CSS background-attachment property is used to define whether the background image has to be fix or scroll. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      body {background-image: url("images/sml-plnt.jpg");
            background-repeat: no-repeat;
            background-attachment: scroll;}
   </style>
</head>
<body>
   
   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
   <p>Aspernatur natus. Vel delectus aliquid dicta tempore ducimus.</p>
   <p>Est, voluptatum placeat. Sequi delectus quam nemo deserunt cumque</p>
   <p>Elit maiores aut ipsam eum tenetur laborum doloribus excepturi dolorum</p>
   <p>Repudiandae fugit numquam eveniet, dicta consectetur, perspiciatis.</p>
   <p>Magni veniam voluptatem? Facilis similique accusantium magnam? Quasi</p>
   <p>Inventore eveniet error! Maiores voluptates repudiandae id laudantium!</p>
   <p>Provident eius vitae quos corporis maiores corrupti rerum facere dolor architecto</p>
   <p>Inventore odio quo, harum ea asperiores blanditiis quia magni voluptatum aspernatur</p>
   <p>laborum quaerat. Sequi eveniet aut sint possimus, esse nulla architecto labore unde</p>
   <p>cum a qui aliquid repudiandae deleniti! Praesentium repellat quo sint facere minus</p>
   <p>quam vero dicta quia, soluta placeat dolores quasi! Similique dolores totam</p>
   <p>maxime temporibus quisquam consequatur exercitationem nihil voluptas aspernatur</p>
   <p>delectus vitae, adipisci, itaque minima! Ratione quo quidem, expedita neque</p>
   <p>exercitationem est illum voluptate nemo mollitia magnam debitis totam quae, rem id.</p>
   <p>Nihil ut velit distinctio aliquam porro saepe, omnis nemo fugiat, odit voluptate</p>
   <p>incidunt qui nisi, numquam beatae voluptates molestias harum ratione? Velit quas</p>
   <p>excepturi debitis veniam id quam nobis deserunt? Cupiditate deserunt adipisci</p>
   <p>optio recusandae mollitia hic labore, necessitatibus dolor quasi repudiandae</p>
   <p>quaerat quas enim omnis voluptatum aut debitis. Officia expedita sequi, laboriosam</p>
   <p>debitis sint magnam quo recusandae praesentium incidunt, porro dicta repudiandae ducimus.</p>
   <p>Eos quas optio placeat, nam porro cupiditate rerum accusantium ut molestiae fugit?</p>
   
</body>
</html>

Output

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Aspernatur natus. Vel delectus aliquid dicta tempore ducimus.

Est, voluptatum placeat. Sequi delectus quam nemo deserunt cumque

Elit maiores aut ipsam eum tenetur laborum doloribus excepturi dolorum

Repudiandae fugit numquam eveniet, dicta consectetur, perspiciatis.

Magni veniam voluptatem? Facilis similique accusantium magnam? Quasi

Inventore eveniet error! Maiores voluptates repudiandae id laudantium!

Provident eius vitae quos corporis maiores corrupti rerum facere dolor architecto

Inventore odio quo, harum ea asperiores blanditiis quia magni voluptatum aspernatur

laborum quaerat. Sequi eveniet aut sint possimus, esse nulla architecto labore unde

cum a qui aliquid repudiandae deleniti! Praesentium repellat quo sint facere minus

quam vero dicta quia, soluta placeat dolores quasi! Similique dolores totam

maxime temporibus quisquam consequatur exercitationem nihil voluptas aspernatur

delectus vitae, adipisci, itaque minima! Ratione quo quidem, expedita neque

exercitationem est illum voluptate nemo mollitia magnam debitis totam quae, rem id.

Nihil ut velit distinctio aliquam porro saepe, omnis nemo fugiat, odit voluptate

incidunt qui nisi, numquam beatae voluptates molestias harum ratione? Velit quas

excepturi debitis veniam id quam nobis deserunt? Cupiditate deserunt adipisci

optio recusandae mollitia hic labore, necessitatibus dolor quasi repudiandae

quaerat quas enim omnis voluptatum aut debitis. Officia expedita sequi, laboriosam

debitis sint magnam quo recusandae praesentium incidunt, porro dicta repudiandae ducimus.

Eos quas optio placeat, nam porro cupiditate rerum accusantium ut molestiae fugit?

CSS background-attachment Syntax

The syntax of background-attachment property in CSS, is:

background-attachment: x;

The value of x should be any of the following:

fixed - used to fix the background image
scroll - used to scroll the background image along with page/content. This is the default value
local - used to scroll the background image along with the content of element
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS Online Test

« Previous Tutorial Next Tutorial »