How to Add an Image to a CSS File

CSS can be used for text-over-image effects and creating basic site layouts

CSS, or Cascading Style Sheet, is often used to define the style of a website. Within the CSS code contains a site's layout, font styles and color themes. One other common use of CSS is defining the background image within the site. A background image defined in CSS can be used for the design of a site theme, or it can also be used to allow for text to be placed on top of an image such as in banner headers.

Instructions

1. Open your CSS file in Notepad.

2. Add the following CSS code:

   .header{

   background-image: URL(image/yourimage.gif);

   }

   Replace "image/yourimage.gif" with the path name where your image file is located.

3. Use the CSS in your HTML by specifying the "header" as the class. For example:

   <div class="header">Header content here</div>

References

• CSS Tutorial: CSS and Images