• Home
• CSS Overflow Example
• Block Elements
• Button Generators
• Color Codes
• Levels
• Menus
• About CSS Stylesheets

• Background Images
• Positioning
• CSS templates

CSS Background Images

There are many advantaged of using images in general. Images usually create a more dramatic, or more specific emotional reaction in a person, so depending on your goal, using an image may be exactly what you need to put your web site onto the next level.

There are three main types of image background that you can use with style sheets. The first is a background image that repeats. This type of image can be helpful if you have an image you need to tile in the background. With CSS background image propery you can choose where the repeating image is located, and if you want to repeat it vertically or horizontally.

The next important group of photos used in web sites are the photos that each have their own space on the page. These are great if you have a lot of images, but they are specific to the text that they are near. For instance, if you have text about dating and texts about pet adoption on the same page, you will need the couples picture next to dating the the dog photo next to adoption. Having these reversed can be incredibly confusing, you can attach each image to the container of the text by adding a clas to each one in the CSS and a CSS background image property.

The last type of image that can be added to a website using style sheets is a static image, or an image that does not move as the reader scrolls down the site page. This type of image works best to your advantage if you have images that are part of your design and need to be shown the entire time the reader is going through your site. Instead of adding all the code to call every image, you can add a class to their containers and define the CSS background image property to each one and define width, height, position, etc, allowing for shorter load time.