3 Replies Latest reply on May 2, 2010 10:05 PM by bdaul

    CS4 background-image doesn't show in browser

    bdaul Level 1

      ok...I have cs4...

      the CSS is:


      body {
          background-image: url(/Assets/qlogoBKGlt.gif);
          background-repeat: no-repeat;
          background-color: #fff;


      IT SHOWS UP in the DESIGN window of DW.  It won't show up in Firefox or Safari...most up-to-date versions.


      The line of code in the html file is:




      The header code;


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <link rel="stylesheet" href="styles/style.css" type="text/css" />


      <link rel="shortcut icon" href="favicon.ico" />
      <link rel="icon" href="favicon.gif" type="image/gif" / >






      * Proof that the background image is there:




      * THE HTML page that should be displaying this:




      * The CSS STYLE SHEET:





      Can someone tell me what I am doing wrong?


      Thanks,  -bill

        • 1. Re: CS4 background-image doesn't show in browser
          John Waller Adobe Community Professional & MVP

          The path in the CSS is wrong.


          You're thinking that the index.html file is in the root directory of this beta site hence the root relative reference in the CSS.


          However, as far as the server is concerned, the root directory (where the index file is located) of this beta site is in a subfolder called "staging".



          The CSS in the body selector for the background is pointing to /Assets/qlogoBKGlt.gif.


          The full address of that path is http://www.solterrasolarcells.com/Assets/qlogoBKGlt.gif but the Assets folder does not exist at root level on the server, hence no image appears.


          So for a root-relative path, you need to prefix the CSS with the "staging" folder




          body {
              background-image: url(/staging/Assets/qlogoBKGlt.gif);
              background-repeat: no-repeat;
              background-color: #fff;


          or for a document-relative path from the "styles" folder where the CSS file is located, go up a level:



          body {
              background-image: url(../Assets/qlogoBKGlt.gif);
              background-repeat: no-repeat;
              background-color: #fff;


          When the site goes live, the "staging" folder will presumably disappear (all files will come up a level) and therefore any root relative links will have to be altered to reflect that.

          • 2. Re: CS4 background-image doesn't show in browser
            Randy Edmunds Adobe Employee

            In addition to John's post...


            If you're seeing the background image in DW, then DW is somehow building a path to the file. You may have specified your Site with a Root Directory of "staging". If so, then maybe you can't see the image in the browser because you are trying to view the file directly and locally. Site-root relative paths need to be resolved either by your server or by DW via a "Temp" file. Try either previewing from your server or using a Preview in Browser Temp file.




            1 person found this helpful
            • 3. Re: CS4 background-image doesn't show in browser
              bdaul Level 1

              Thanks John...the relative addressing was my ticket!   Thanks to the others that read and/or replied!  --bill