Fixed Image Background for the Page

In this tutorial you will learn how to put a fixed image background on your pages, that is the background that stays in the center of your page even when you scroll the page.

Related Tutorials

Fixed Image Background for the page
This tutorial will teach you how to put a fixed image background on your pages, that is the background that stays in the center of your page even when you scroll the page.

Fixed Background
Learn how to add a backgroud image that doesn't move as a page is scrolled.

CSS Background Examples
The CSS background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page.

Learn CSS: Background Images
This simple tutorial will teach you about the background property in CSS, there are many ways to add a background to your page body and seperate page elements.

Page Layout and Background Image Design
Clear answers are provided with tutorial exercises on screen and browser resolutions, setting Web page width in absolute and relative length units, setting images and font sizes in relative length units, adding multiple background images.

How To Style Heading Tags
Now when it comes to heading tags CSS is very important. They can be styled in many ways using a number of methods: Complete image to visitor with hidden text - Image Replacement Technique. One Background image as whole background with normal XHTML text - as on this site. Repeated background with XHTML text on it - Good to reduce bandwidth. Background and text all in css by use of colours and border.

Guide to Backgrounds
As the so called "presentation attributes" for the body element have been deprecated, some of you may be wondering how to add a background image to your XHTML document. The answer is to use CSS. The benefit of using CSS is that you can do a lot more with your background image. This tutorial will show you how.

CSS Background Rollover
Looking to add a little style to your image links? Let's use CSS to add a background color that appears when the mouse hovers over the image. This style can be used on a variety of images but we'll be looking at adding this style to affiliate buttons.

Background Image (No Repeat)
In this discussion you will see how to set background image (No Repeat).

Style Sheets and Backgrounds
You can do a lot with text and page backgrounds through CSS commands--in fact, if you have a MySpace account, that's the only way to customize your page! Here we've tried to run down all available events (including multiple backgrounds) and describe how to use positioning to set background watermarks on your page.

Background Color
CSS background colors work very similar to the bgcolor command in html. When applied within the <body> tag it will color the entire page in that color. This may seem redundant to the bgcolor tag, however since the bgcolor tag is typically applied to each page and CSS are usually linked throughout a site, you can easily in one place, change the backgrounds to many pages similar.

CSS and Backgrounds
In this tutorial I'll be going into the properties that give colour to your layouts, and let you control your background images. You will soon be able to control the background colour and image of all your elements.

Improved CSS Hover Images
You see a lot of hover effects on web nowadays. When you hover your mouse cursor over a link it usually changes to something else - It doesn't matter if the link is an image or just text, there's usually some sort of hover effect in place. If it's a graphical link the hover effect is usually another image displaying the hover effect. This image is often preloaded on page load so that the user sees the effect right away, but there's also another way to do it. How about using just one image and changing its state/position it with CSS?

Make a Fixed Banner
This tutorial will eventually give the effect that Popup blockers come up with when they block something.

Shade Image Tabs Menu
This is an attractive "blue shading" image tab menu. The shade effect is created using two gradient background images, one for the overall tabs, and the other, for the currently "active" tab.

Changing The Background
Learn how to setup your site, div or table background using css.

Cascading Style Sheets (CSS); Backgrounds
Background colors and images can be used for stylistic effects and can be an important element in the design of web sites. With standard HTML, one can assign backgrounds to a web page and to tables and table data cells.

Text Rollovers
These are great for aiding the user in navigation while not slowing the loading of your page through image flip rollovers.

CF Navigation Menu II
This is an inverted version of the original CF Navigation Menu. Four images are used as part of its interface- the two round corners, an indented divider between menu links, and a gradient background image spanning the menu.

Page Break
One of the shortcomings of browser display is that the document rendered by the browser does not usually print as well as it looks on screen especially when it comes to determining where a printed page should begin and end. CSS has a page break command that will accept two values before:always and after:always. You can specify that when printed which and how many pages will be printed from your one page displayed in the browser.

Changing Table Background on MouseOver
This tutorial will teach you how to make a menu like tables that will change background color when you mouseOver.

Controlling Background Styles
This tutorial will show you how to control background styles in css.

Background properties
Css properties allows you to specify the background of an element. Backgrounds may be colors or images.

Z-index, background images and hidden text-Search Engine friendly
In this tutorial I will explain how to use background images with a different tags to place them one on top of the other using absolute positioning and z-index.

Create custom form button
This tutorial explains how to create custom web form button using CSS and the background image

Chrome Menu Bar
This is a lightweight "chrome" looking CSS menu bar. The menu uses two variants of the same background image to create the hover effect.

Define Page Scrollbar Styles
Make your page look nicer by applying CSS styles to your page scrollbar.

Holy Grail 3 Column Layout in CSS
Three columns. One fixed-width sidebar for your navigation, another for, say, your Google Ads or your Flickr photos and, as in a fancy truffle, a liquid center for the real substance. Its wide applicability in this golden age of blogging, along with its considerable difficulty, is what has earned the layout the title of Holy Grail

How to Build a Simple Button with CSS Image Sprites
The button is one of the most common elements in the world of the web. In modern web design buttons are used not only on forms, but also as visual aids that draw attention to important elements of the page.

Improved CSS Hover Images
You see a lot of hover effects on web nowadays. Images are often preloaded on page load so that the user sees the hover effects right away, but there's also another way to do it. How about using just one image and changing its state/position it with CSS?

CSS - Cascading Style Sheet
CSS is a simple file which controls the visual appearance of a Web page without compromising its structure. Using CSS we can control our font size, font color, link color and many other attributes on our web page. This will make our HTML code much more readable and the page size will be reduced.

High resolution image printing
How to use media-specific CSS to provide a suitable layout for the printed page. But how great would it be to be able to go further and provide a better print alternative through the use of specific high-resolution images specifically for print?

Positioning
This tutorial describes how to make a point of placing every item on your page exactly where you want it and make that placement exactly the same on every browser your page is viewed in.

External Stylesheets
As you can probably tell from the name this means having an external file and then linking to it from your page so you don't have all that code in your head tags in every single page.

Define Page Scrollbar Styles
Before we look into Page Scroll Bar definition, please have a look at the example here. Well it does not look that good, but that is just for the differentiation of the areas of the scrollbar. Once you know which area is defined with which code you can modify it as you like.

CSS Tutorial For Beginners
In this tutorial, you will learn how to: Create an external CSS file and link it to multiple HTML files; Embed and import a style sheet; Create inline style sheets; Use tap selector and class selector; Set up font sizes, colors, faces and styles; Set up background color and image; Set up margins, text-align and decoration; Create layers; Set up atributes of the table, and more...

Style Sheets Shorthand
How to reduce the amount of code you need to write the achieve the same results from you cascading style sheet. The less code you have on your page, the quicker the page will load.

CSS top image preloader
This tutorial will show You, how to use nice GIF animated preloaders for top images (or any other image).

Image Sprite Navigation With CSS
Creating a navigation with Image Sprites.

Pure CSS Image Rollovers
In this tutorial you will learn how to transform an ordinary link into a button with image rollovers using nothing but css.

Fixed Image Background for the Page

View Tutorial