How to Add an Image to a CSS File

Save

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.

  • Open your CSS file in Notepad.

  • 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.

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

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

References

  • Photo Credit Hemera Technologies/Photos.com/Getty Images
Promoted By Zergnet

Comments

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!