DIVs with images

Posted on 2011-05-12
Last Modified: 2012-06-27
I am trying to add an image to a div as a background image.  Here is the following div that I have for this div background image.

<div id="mailformtoolset" style="background-image:url('~/images/bodybg.png'); background-repeat:repeat-x; width:225px; height:110px; background-position:center;">

So why is my div not picking up the image for the background and how do I fix that?  The file that I am writing code for is a user control located in the controls directory, the web page that I am testing it on is in the root directory and the image is located in the images folder.  How do I fix this issue?  Thank you!
Question by:VBBRett
    LVL 8

    Expert Comment

    That tilde looks suspect; try the full path as a test:

    Accepted Solution

    use relative path to define url in css. When images folder is on root and the page is in a directory on root, the css will be -  
    <div id="mailformtoolset" style="background-image:url('../images/bodybg.png'); background-repeat:repeat-x; width:225px; height:110px; background-position:center;">

    Open in new window


    Assisted Solution

    The image path have an "~" that is not recognized by the browsers.

    You should use absolute paths ("/images/image.jpg") or relative paths ("../../image/images.jpg")

    You could learn more at

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

    794 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now