Skip navigation
VectorEdge
Currently Being Moderated

CSS header images not visible except in design view

May 9, 2012 2:24 PM

Tags: #help #image #dreamweaver #css

I have a recurring problem in my css designs, and it's driving me to drink. In my stylesheets I define background and header images that work beautifully in design view, but when you view it any browser the header image is gone. This is not the first time I have struggled with this and I am over it. On the example I have posted there is an image underneath (not below, actually underneath) the company name and slogan at the top of the page, but you sure can't see it can you? As a matter of fact the second line of text completely disappears because the header image is not displayed. If someone can show me where I am going wrong with this I would appreciate it. The link to the site is here:

 

http://firstvirginiaservices.com/test/index.html

 
Replies
  • Currently Being Moderated
    May 9, 2012 2:42 PM   in reply to VectorEdge

    Your header image is 404 not found on server.

    http://firstvirginiaservices.com/images/header.jpg

     

    Try uploading it again.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 9, 2012 3:22 PM   in reply to VectorEdge

    This is a path issue.

     

    You're testing your new website in a subfolder called test. The server does not know that.

     

    Your header rule points to the image with a site root reference i.e. starting from the root folder

     

    #header {

    margin:0;

    font-family: Verdana, Geneva, sans-serif;

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

    background-repeat:no-repeat;;

    text-align: right;

    }

     

    That'll probably be OK when the site goes live but not while it lives in the "test" subfolder.

     

    The server is looking for

    http://firstvirginiaservices.com/images/header.jpg

    but the images folder does not exist at the root folder level yet so the file is not found and the image does not display.

     

    You really mean

    http://firstvirginiaservices.com/test/images/header.jpg

     

    The solution is to

     

    EITHER

     

    keep the root relative path and change the path temporarily in the CSS while you're working in the test folder

     

    #header {

    margin:0;

    font-family: Verdana, Geneva, sans-serif;

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

    background-repeat:no-repeat;;

    text-align: right;

    }

     

    then tweak the path (remove "/test") when the site goes live.

     

    OR

     

    use a document relative path in the #header rule (from the CSS folder location to the images folder location)

     

    #header {

    margin:0;

    font-family: Verdana, Geneva, sans-serif;

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

    background-repeat:no-repeat;;

    text-align: right;

    }

     
    |
    Mark as:

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