HERMANET THE G.O.A.T.
  • DMP
    • DMP Notes >
      • Media Literacy >
        • Media Ownership
      • Audio >
        • Audio Exercises
        • This American Life
        • Independent Interview
        • Foleys
      • GIFs
      • Storytelling
    • DMP Calendar
    • DMP Resources
  • Home
  • 3D Animation
    • 3D Animation Calendar
    • 3D Modeling >
      • Blender Basics >
        • Donut Tutorial
        • Modifiers
        • Sculpting
      • Modeling Tutorials
      • Surfaces >
        • Materials
        • Nodes
        • Textures
      • Physics >
        • Flag Tutorial
    • Characters
    • Blender Sandboxing 1
    • 3D Modeling & Animation Resources
  • Accounting
    • Accounting Calendar
    • Accounting Assignments
    • Accounting Notes >
      • Accounting Video Notes
    • Review Quizzes >
      • Intro to Accounting Quizzes
  • Web Design
    • Web Design Calendar
    • Notes >
      • Organization and Planning >
        • Basic Computer Terms
        • Critiquing Web Pages
        • Parts of URL
        • Webmasters & Accessibility
        • Good Websites
        • File Structure
        • Naming Conventions
        • Web Page Layouts
      • Setting up a Page >
        • HTML Basics >
          • Code Basics >
            • Invitation Assignment
            • HR and special char
            • Lists >
              • Basic Lists
              • List Formats
            • Headings, PG & Lists Exercise
            • HR & Formatting Exercise
            • Basic HTML challenges
      • Advanced HTML >
        • Tables >
          • Basic Tables
          • Table Exericses 1
          • Advanced Tables
          • Table Exercise 2
          • Tables Challenge
        • Color >
          • Color Design
          • Color Exercise
        • Links >
          • Absolute links
          • Relative Links
          • Email Links
          • Named Anchors
          • Links Exercise
          • Links Exercise 2
        • Images >
          • Adding Images
          • Images Exercise
          • Image Mapping
      • CSS >
        • About CSS
        • Styles >
          • Inline CSS
          • Embedded Styles
          • External Styles
        • Style Attributes >
          • CSS Text Styles
          • CSS Backgrounds
          • Link Styles
        • Div vs Span
        • Box Model >
          • About the Box Model
        • CSS Practice Project 1
        • CSS Practice Project 2
        • Transparency
        • CSS Positioning
        • CSS Transform
        • CSS Practice Project 3
      • Copyright >
        • Friendly Sources
      • JavaScript >
        • JavaScript Examples
      • Other Exercises >
        • Colors & Tables Exercise
        • Frames
        • Recipe Challenge
  • Bus Law
    • Law Calendar
    • Law Units >
      • Our Laws
      • Ethics
      • Constitution
      • Court Systems
      • Criminal Law
    • Law Resources
  • Programming
    • Programming Calendar
    • Notes >
      • Computer Systems >
        • Computer Systems Reminders
      • Objects & Primitive Data
      • Expressions, Types & Operators
      • Program Statements
      • Programming Resources
  • General Info
    • Adding Calendar Info
    • About Google Drive
    • Best Chrome Apps

Backgrounds with CSS

In CSS, there are many elements that can be given a background. For example, you can set a background to the page through the <body> tag, to a <div> or <span> tag, or even to an <a> tag. The CSS code would follow this format:

background-image: url(http://weelicious.com/wp-content/uploads/2009/04/broccoli-soup.jpg);


     if it's an absolute link

or

background-image: url(images/bg.jpg);

for a document-relative path.

**Keep in mind that the path you name should be relative to the location of your CSS. That is, if your CSS is embedded within <style> tags in
the html file, the background-image property value should point from the html file to the image file. However, if your CSS is located on an external .css file, then the background-image property value should point from the css file to the image file.

Here's an example of some CSS which puts a background in a <div> tag:

div {background-image: url(images/firstDog.jpg);}

Note also that you can set a color as the property value instead of an image:

div {background: #33ff33;}
Picture
Powered by Create your own unique website with customizable templates.