SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS: background-image does not work

    When I upload this CSS code, HTML code to the hosting server, the slogan.png image does not show up...

    CSS code:
    Code:
    body
    {
    	margin: 0;
    	height: 100%;
    }
    
    
    .main
    {
    	width: 950px;
    	margin: 40px auto 0;
    	/* padding: 0 0 50px; */
    	background-color: #DDD;
    }
    
    .logo
    {
    	width: 800px;
    	margin: 40px auto 0;
    	position: relative;
    }
    
    .pages
    {
    	width: 510px;
    	padding: 0 0 0 100px;
    	background-color: #BBB;
    	background-image: url(img/slogan.png) no-repeat 75px 50%;
    }
    HTML code:
    Code:
    <body>
    
      <div class="main">
        <p>Class=Main</p>
      
        <div class="logo">
          <img src="img/logo.png"/>
        </div>
      
    
      </div>
    
    
    </body>
    Slogan.png
    500X427px

    logo.png
    800X110px

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Code:
    background-image: url(img/slogan.png) no-repeat 75px 50%;
    That path assumes that the image folder is in the same folder as your CSS file. Is it?

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No slogan.png image file is at "img" folder.

    Currently I have two folders in use: img folder, css folder.
    Do I have to move the image location to make it work?

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    The question asked is: Where is the "img" folder???

    Currently, your css file is looking for the "img" folder in its css directory like this:

    yourfile.html
    css/cssfile.css /* path to image: img/slogan.png */
    css/img/slogan.png

    Absolute vs Relative paths:

    /img/slogan.png is an absolute path to the image.
    img/slogan.png is a relative path to the image.

    yourfile.html
    /img/slogan.png /* these folders are in the root directory */
    /css/cssfile.css /* path to image: /img/slogan.png , or ../img/slogan.png */

    yourfile.html
    img/slogan.png /* these folders are in the same directory as the html file, which may not be the root directory. */
    css/cssfile.css /* within this css file, the path to the image may be different than in the above css file *//* path to image: ../img/slogan */

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "img" folder is located where index.html file is (So in the root directory)

    I have fixed my CSS code to: /img/slogan.png (So I fixed it to the absolute path)
    However the image (slogan.png) is no where to be seen...

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed the CSS code to:
    Code:
    background: url(/img/slogan.png) no-repeat 75px 50%;
    And now the image is visible.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Good catch!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Over time, around here, there have been arguments over whether something like

    /img/slogan.png

    is actually "absolute" or not. I used to call it that, but the panditas have now convinced me to call it a "root relative" path, and to reserve "abolute" for paths of this ilk:

    http://myslite.com/img/slogan.png

    It's "absolute" because it works from anywhere—on any site. Seems fair enough to me. The other paths are relative to the site itself, but not universal, as it were.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    When I wrote the post I had put (root relative) in parens, but deleted it to avoid mixing "relative" terms. While "root relative" is certainly a reasonable term, I would argue that including the URI in a path makes it a network path rather than an absolute path. The internet is fundamentally a massive network. Taking a very-well-established computer design/engineering term and deciding that it is now the domain of the internetters to redefine as they please seems a bit weird. Network path is far more correct than absolute path. Oh, well.

    Edit:
    A network path can be directed anywhere. http://sitename can be routed anywhere. There is nothing "absolute" about it. It's ethereal at best. An absolute path is a hardware path that is indeed root relative and cannot be changed. Adopting the term absolute path for one that begins with http:// does not seem very smart.

    recalcitrant ron

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yes, you have a larger view of it than I do, but meh, I claim to be only the messenger here. I guess I think in terms of a URI being a uniform locator that is unique to that resource, so I think of it as absolute in that sense—that it points to one place/ one unique location from any point.

  11. #11
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is importent to write CSS corectly.
    1) Write the CSS like this background: url(/img/slogan.png) 75px 50% no-repeat;
    Here is how to use the background propertie
    css-background-5.jpg
    2) Use paths either from root or starting from your CSS file. Understand how your server handles paths!
    Here is a fun picture on folder paths
    directories.jpg

    Notice my server is lighttpd and it handles both paths from root "/", and also path from the css "../media/"
    Take a look


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •