CSS: background attachment

By Xah Lee. Date: .

css background attachment

background-attachment

Whether the background image scrolls with the page, or fixed to window.

scroll
default. moves with content.
fixed
fixed to window.

may be disabled on mobile phone.

local
like scroll, move with the content when the element itself has scroll bar. 
.x {
 /* default. moves with content */
 background-attachment: scroll;

 /* parallax effect */
 background-attachment: fixed;

 /* scrolls with content inside element */
 background-attachment: local;
}

example. fixed

good morning
.fixed-Zpksx {
 background-image: url("i/venus_comb_32m-s289x217.jpg");
 width: 200px;
 height: 200px;
 background-attachment: fixed;
}

example. local

  • 1 good morning
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
<div class="local-Zpksx">
<ul>
<li>1 good morning</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>

</div>
.local-Zpksx {
 background-image: url("i/venus_comb_32m-s289x217.jpg");
 width: 200px;
 height: 200px;
 background-attachment: local;
 color: red;
 overflow: auto;
}

CSS. Background