1. 2015
    Jul
    3

    How do you add a background image in CSS?

    Posted By


    mustang

    You can add a background image to an element by using the background-image property in your declaration block and specifying an image.

    style.css

    div { background-image: url("my-image.gif"); }

    The important thing to note in loading the image is understanding the URL value, relative path of the image being referenced to the markup document. If the image is in the same folder as the markup document, then you can enter the name of the file as the URL value, but if the image is in a sub-directory, then you must include the sub-directory

    File Hierarchy

    
    |
     - - index.htm
    |
     - - /subDirectory
                 |
                  - - my-image.gif
    

    style.css

    
    div { background-image: url("subDirectory/my-image.gif"); }
    

  2. About Emeka Echeruo

    Emeka Echeruo

    I love sports, football which I refuse to call soccer, and the outdoor especially walks in park. Software development is my passion, there is a beauty in creating something out of nothing but algebra that ends up becomes a part of a persons daily life. I love kids, dogs, nightlife and art because it finds you and moves you emotionally!

  3. Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.