Fixed Backgrounds

Main >> Content >> Tutorials >> HTML >> Fixed Backgrounds

Fixed background is a background that doesn't move if you scroll down. It looks really cool, and is very decorativ. I know many people use it! So here's the tutorial on how you can do it yourself.

Step 1: The first thing you do is to copy the code under and paste it in your CSS.

body {
  background-color: colorhere;
  background-image: url(urlhere);
  background-position: bottom right, bottom left, top left, top right, center;
  background-repeat: repeat or no-repeat;
  background-attachment: fixed;
}

Step 2: Here's how the code works:
Background-color: Here you paste the background color you want to have on the site (hint: let it match the color of the picture).
Background-image: Paste the URL-adress of the picture you want to have as a fixed background.
Background-position: Here you type in the position of the picture. Here's the different positions you can use: BOTTOM RIGHT, BOTTOM LEFT, TOP LEFT, TOP RIGHT, CENTER.
Background-repeat: If you want the background to repeat it self, let it say repeat, but if you only want your picture to be one, then type in no-repeat.
Background-attachment: This parts deside if the picture is going to be fixed, and since this tutorial is about fixed backgrounds, just let this part be as it is;)

Step 3: When you have filled in all the details, then you are finished. I recommand that you can try different things with the code. This way you get to know it alot more.