[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 180
  • Last Modified:

DIVs with images

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!
2 Solutions
That tilde looks suspect; try the full path as a test: http://www.website.com/images/bodybg.png
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

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 http://www.w3schools.com/css/

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now