CSS fixed background

Sometimes you will need to make a background image fixed ( not to scroll with the page ), that because you have a very large image that does not repeat, or you want to make something like an watermark, the solution is simple and is around for ages, all you have to do is use the CSS background-attachment property.

Background-attachment supports three values: scroll ( which is default ), fixed and inherit.

In most cases the fixed background is applied to the body element, but can be applied to any HTML element. Without further ado, … the CSS code.

body {
      background-image: url('path/to/background.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;

Below is the shorthand version .

body {
      background: url('path/to/background.jpg') no-repeat fixed center;

Here you have a demo.

Leave a Reply

Your email address will not be published. Required fields are marked *

4 + 3 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.