Skip navigation
alexr62
alexr62
Currently Being Moderated

Issues with CSS background image

Aug 6, 2012 4:58 PM

I've recently uploaded my website to a server, but the image I specified for the container div's background image property isn't loading. Also, an image called "logo3.png" that is supposed to be above the navigation bar loads in the Safari browser, but not Firefox.

 

When creating the site, I had a similar problem when trying to view its pages with Live View. Also, whenever I tried to add an image or other file into the HTML by using "browse," the site root folder would automatically be included in the link (With the site root folder being "GlennThomas," "Glennthomas/images/logo3.png" would appear instead of "images/logo3.png."

 

I didn't have any issues like this with the last website I created. Any help would be appreciated.

 

Here is the website URL:

 

www.glennthomasmusic.com

 

-Alex

919 Views   10 Replies   Latest reply: alexr62, Aug 8, 2012 9:34 PM
 
Replies
  • d4com
    Currently Being Moderated
    1. d4com,
    Aug 6, 2012 5:59 PM   in reply to alexr62
    Report

    im also having a similar problem so any help here would be appreciated.

     

    www.rochdalerostrum.com

     
    |
    Mark as:
  • mytaxsite.co.uk
    Currently Being Moderated
    2. mytaxsite.co.uk,
    Aug 6, 2012 6:35 PM   in reply to alexr62
    Report

    OK I have tested your images and they appear to be corrupted according the message sI am getting.  See these images (click if necessary to enlarge them)

     

    2012-08-07_0232_001.png

     

    2012-08-07_0232.png

     

    Please post your images on these forums for somebody to check them out or to correct them in a graphics program.

     
    |
    Mark as:
  • mytaxsite.co.uk
    Currently Being Moderated
    3. mytaxsite.co.uk,
    Aug 6, 2012 6:38 PM   in reply to d4com
    Report

    d4com wrote:

     

    im also having a similar problem so any help here would be appreciated.

     

     

    Please post your question separately because your problem may be different from Alex.  You need to explain your problem as Alex has done.

     

    Good luck.

     
    |
    Mark as:
  • alexr62
    Currently Being Moderated
    4. alexr62,
    Aug 7, 2012 4:28 PM   in reply to mytaxsite.co.uk
    Report

    Do you mean that I should put the images in a post? One of them is too large, and I just want to make sure that's the right way to upload them as you requested.

     

    Thanks

     

    -Alex

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    5. MurraySummers,
    Aug 7, 2012 4:36 PM   in reply to alexr62
    Report

    I'm showing that the paths to both bckg.jpg and transparentblack.jpg are not correct.

    Attachments:
     
    |
    Mark as:
  • alexr62
    Currently Being Moderated
    6. alexr62,
    Aug 7, 2012 6:35 PM   in reply to MurraySummers
    Report

    I checked remote view in the files panel to make sure the file paths and names were correct. I'm not sure what's causing this.

     

    The image doesn't show "logo3.png" as not being found (and I think you're using Safari), but the image won't render in Firefox. Are there any browser compatability issues related to images that would cause this?

     

    Is there any other way for you to access the image without me attaching it to a post? (bckg.jpg is 4.2 MB)?

     

    -Alex

     
    |
    Mark as:
  • mytaxsite.co.uk
    Currently Being Moderated
    7. mytaxsite.co.uk,
    Aug 7, 2012 7:59 PM   in reply to alexr62
    Report

    Is there any other way for you to access the image without me attaching it to a post? (bckg.jpg is 4.2 MB)?

     

     

     

    Your images are not where they should be.  I just checked in again and the following images are not in the correct folder:

     

    http://www.glennthomasmusic.com/images/bckg.jpg

    http://www.glennthomasmusic.com/images/graphics/transparentblack.png

    http://www.glennthomasmusic.com/images/graphics/transparentblack.png

    http://www.glennthomasmusic.com/images/graphics/logo3.png

     

    The following image is OK:

     

    http://www.glennthomasmusic.com/images/homemainlow.jpg

     

    You need to upload the images again in the folder called images for the bckg.jpg and images/graphics for the other three.

     

    We can't access the images if they are not in the correct place.

     

    I have checked in IE9 and FF 14.0.1.

     

    Good luck.

     
    |
    Mark as:
  • alexr62
    Currently Being Moderated
    8. alexr62,
    Aug 7, 2012 9:56 PM   in reply to mytaxsite.co.uk
    Report

    I checked all of the file names and paths again just to be sure and they seem correct. I'm not sure what to do. Here's a screenshot of the files panel in remote view:

     

    files screenshot.png

    Is there something I'm missing?

     

    -Alex

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    9. MurraySummers,
    Aug 8, 2012 5:16 AM   in reply to alexr62
    Report

    The paths in your CSS file are wrong.  You have this -

     

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

     

    and it should be this -

     

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

     

    and this -

     

        background-image: url(images/graphics/transparentblack1.png);

     

    should be this -

     

        background-image: url(../images/graphics/transparentblack1.png);

     
    |
    Mark as:
  • alexr62
    Currently Being Moderated
    10. alexr62,
    Aug 8, 2012 9:34 PM   in reply to MurraySummers
    Report

    Thanks, Murray. The paths are fixed now. I don't understand why ".." has to be in the path. Is it because without ".." the browser looks for the images folder in the CSS folder?

     

    The pictures are still not loading, and the browser still says that the images contain errors when I enter their url.

     

    -Alex

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points