Web Analytics Made Easy - StatCounter Background images not displayed on page - CodingForum

Announcement

Collapse
No announcement yet.

Background images not displayed on page

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Background images not displayed on page

    Hello everybody!


    I'm working on an asp.net 4 project in which I'm using a jquery plugin for displayig bubble popups on mouse over on certain elements. I started facing a problem with the borders of the plugin not displaying, and now after a while trying to figure what was wrong, I've narrowed the issue to the background images that are set as inline styles on the border elements not being displayed.
    I tried somethning more simple like,

    Code:
    <span style="background-image:url(top-left.jpg);">testing</span>
    and voila! doesn't work. It's easier to solve it now i think but it's freaking weird.
    The image exists and the span is displayed but no image on the background. I tried an empty HTML file with just that same code

    Code:
    <html>
<head>
<title>jQuery Bubble Popup - How to make a selectable Bubble Popup when mouse is overy</title>

</head>
<body>
<span style="background-image:url(top-left.jpg);">testing</span> 
</body>
</html>
    and here the image is displayed! Both pages at the same level and with exactly the same code for the span element.
    Also when i look in Firebug and roll the mouse over the image on the styles panel to the right, the preview of the image is shown for the test file, but when i do it on real page, then it says that it can't find the image.
    One more thing I've noticed is that if I set the property in a CSS class then it works fine, it's just setting it through the inline styles what doesn't work.

    Any ideas? Any help will be highly appreciated since I've been stuck on this for quite a while.
    Thanks so much in advance,

    /Kenia
    Tags: css, images, not displayed
  • #2
    it is probably because you are missing a few things... first insert doubel quotes on either side of the url
    eg
    Code:
    background-image:url("myimage.jpg");
    also try setting your path selector thingy (<isn't that great verb-age?)
    I am talking about relative/absolute paths... so in your case try
    Code:
    background-image:url(./top-left.jpg)
    I know how/when to use relative/absolute paths, but have a heck of a time remembering the correct amount of dots... if someone can elaborate the path terminology better that would be great... in the meantime try that

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

    Comment

    • #3
      try adding a height and width to your span style. when using a background image, the span/div or whatever element you are using will NOT adjust its size to the image. So lets say your background image is 320px wide and 100px in height, then try adding width:320px; and height:100px; to your span!

      Hope this helps!
      "The problem with troubleshooting is that trouble shoots back."

      Comment

      • #4
        Hello guys and thanks for the replies!
        Now the issue is solved, it was a problem with the path, not quotes or sizes. Strange since the relative path should work just fine one could think, right?.
        Well thing is this project I'm working on is actually an EpiServer project (www.episerver.com) and thus the requests are handled in a different way and the URL rewritting messed up the path for the image. So the solution was to set an absolut path starting from the project folder.

        Cheers,
        /Kenia

        Comment

        Previous template Next
        Working...
        X