Back to list of all examples

Useful Stuff About:

Background Image Centered AND FIXED

Scroll this browser window to see effect of background image that always centers itself and that does NOT scroll with content and is FIXED to the browser. Best practices:

• Create a large enough image (something like 2000x1100) to cover up the large 1920x1080 px screens on the 21.5" iMacs we have at Freestyle. Highly recommended that you create an image that has the same SOLID color on the left, right and bottom edge of the image.
  Click here for a good example with black background behind the main background image.
  Click here for a bad example with black background behind the main background image.
  • For faster downloading, create an image that is shorter such as 2000x300 px with a solid color at the bottom, then add a CSS background color to that matches the bottom most color of the image - like the black at the bottom of the background image of this page. This will just appear like the image is really tall, but it's not.
• For content that is centered in a 1000px centeringDiv, create the image knowing that the center 1000px will be covered up by the content - nothing distracting, nothing too important to see
• For content that is centered in a 1000px centeringDiv, create the image with visual interest to the left and/or right of the center 1000px

body {
   background-attachment:fixed;/*IMPORTANT to keep the image fixed to browser*/
   background-image:url(../images/Background_Image_Centered.jpg);/*Adjust the path to actual image*/
   background-repeat:no-repeat;/*Usually don't want custom background images repeating*/
   background-position:top center;/*This ensures the top of the photo is always visible and it REMAINS centered on the page*/
   background-color:#000;/*Adjust this color to fit the bottom most layer color or your main background image*/
}