How to Make a Fixed Background in CSS
You can create Web pages with many style properties. Using HTML and CSS (Cascading Style Sheets) you can specify various different style rules determining how your Web page content will appear. Among the style properties you can declare in CSS is the background. You can set background properties for elements and for the HTML page as a whole. A background may also contain an image which can be repeated to fill the available space and optionally fixed so that it does not move when the user scrolls the page.
Other People Are Reading
Instructions
-
-
1
Create your Web page. If you do not already have a Web page built use the following sample structure which includes a link to an external style sheet:
<html>
<head>
<link rel="stylesheet" type="text/css" href="backstyle.css"/>
</head>
<body>
<div>Here is the page content</div>
</body>
</html>
The page contains a single "div" element purely to demonstrate. If you want to give your CSS file a different name, alter the "link" element "href" attribute to suit the name you are choosing.
-
2
Prepare your background image. If you already have an image file you wish to use in the background of your Web page, upload it to your Web server. If the image file is large in size you may wish to optimize it to reduce the amount of time it takes to download over the Web when people view your page. If you are downloading an image to use as your page background or are creating it using a graphic design program this is also an advisable step. You can reduce the file size of an image by choosing settings for the image quality when you save it in a program such as Photoshop, Paint.NET or The GIMP (GNU Image Manipulation Program).
-
-
3
Create your CSS code by opening a new file in a text editor, saving it with the name "backstyle.css" or any other name you prefer, remembering the "href" attribute in your HTML "link" element must match this name. Enter the following code setting your chosen image as the background:
body {background:#000000 URL("images/bgpic.jpg");}
This code assumes your image file is going to be saved in a directory named "images" which is stored in the same directory as the Web page itself. Alter the code to suit the name and location of your image file if necessary. The code also indicates that any area not covered by the background image should be colored black.
-
4
Alter your CSS code to dictate whether your background image is repeated or not. The following code indicates that the image will be repeated on the "y" axis but not on the "x" axis:
background:#000000 URL("images/bgpic.jpg") repeat-y;
Other optional values for background repetition include "repeat-x" to repeat on the "x" axis and "no-repeat" to display the image once only. If you do not include a value for the background repeat property, the default is to for the image to be repeated along both axes.
-
5
Alter your CSS code to fix the background image. The following extended code sets all of the background properties in a single declaration, including the fixed setting:
background:#000000 URL("images/bgpic.jpg") repeat-y fixed;
Adding the word "fixed" specifies that when the page is scrolled by the user the background image will not scroll along with it but will remain in the same position. Save your files, upload them to your server and browse to them to test their appearance.
-
1
Tips & Warnings
An effective background image can create a stylish look within a page without the need for detailed graphic design work.
A repeated background image may look confusing depending on the image in question.
References
- Photo Credit Comstock/Comstock/Getty Images
