SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    background: url() not working

    I am having trouble getting a background image to work!

    It appears in my index.php page, but not in other web pages from my "pages" directory...


    Here is my directory/file structure...
    Code:
    components
    	body_header.inc.php
    
    css
    	components.css
    
    images
    	debbie_160x45.png
    
    pages
    	article_index.php
    	howto_index.php
    	interview_index.php
    
    index.php

    In every web page in my site I have this code to include my Page Header...
    Code:
    	<!-- BODY HEADER -->
    	<?php	require_once('components/body_header.inc.php');	?>

    Here is body_header.inc.php...
    Code:
    	<!-- PAGE HEADER -->
    	<div id="pageHeader">
    
            <!-- Display Company Logo -->
    				
    		<h1 id="homePage">
    			<span></span>Debbie's
    		</h1>

    And here is components.css...
    Code:
    h1{
    	width: 220px;
    	height: 36px;
    	position: relative;
    }
    
    h1 span{
    	background: url(/images/debbie_160x45.png) no-repeat;
    	position: absolute;
    	width: 100%;
    	height: 100%;
    }

    Why is background: url(/images/debbie_160x45.png) no-repeat; not working??

    My understanding is that in HTML, a forward slash represents the Web Root and therefore whether the page referencing this stylesheet is in the Web Root itself (e.g. "index.php") or in another sub-directory (e.g. "pages/article_index.php") the pages should be able to find my background image?!

    What is going on??

    Thanks,



    Debbie

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try


    Code:
    <?php    require_once('/components/body_header.inc.php');    ?>

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    try


    Code:
    <?php    require_once('/components/body_header.inc.php');    ?>
    That won't work with PHP the way it does in HTML, however I have the right path in my include in the file article_index.php...
    Code:
    		<!-- BODY HEADER -->
    		<?php	require_once('../components/body_header.inc.php');	?>
    I think this is an HTML issue, thus why I posted it here. But then if I knew what the problem was I would have fixed it?!


    Debbie

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,187
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    Try adding display: block to the span style declaration.
    The only code I hate more than my own is everyone else's.

  5. #5
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    That won't work with PHP the way it does in HTML,
    ok, if you say so.

    I just don't like specifying path names (absolute or relative) without starting them with either a /, ./ or ../

    Doing so caused me problems in the past.

  6. #6
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,187
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    Yeah, most of the time a constant is defined that specifies the absolute path to the web root.
    The only code I hate more than my own is everyone else's.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    Yeah, most of the time a constant is defined that specifies the absolute path to the web root.
    I believe the problem is with background: url(/images/debbie_160x45.png) no-repeat; which is HTML.

    How does url work? (I assumed like src...)


    Debbie
    Last edited by Stevie D; Dec 4, 2011 at 07:22. Reason: Let's keep this friendly, please

  8. #8
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I believe the problem is with background: url(/images/debbie_160x45.png) no-repeat; which is HTML.

    How does url work? (I assumed like src...)


    Debbie
    That looks like css code to me, not HTML.
    Last edited by Stevie D; Dec 4, 2011 at 07:22. Reason: Deleted text removed from quote

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    That looks like css code to me, not HTML.
    Yes, it looks like you are correct...
    http://reference.sitepoint.com/css/background-image


    Unfortunately, SitePoint doesn't do a very job describing the URI/URL thingy...

    (Paths have got to be one of my weaknesses?!) *GRRRR*


    Debbie

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,316
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    It the H1 appearing on pages but not the bg image? If the H1 is appearing, then presumably the include is working. There is nothing wrong with the CSS, so something else is amiss. As usual, a link would be helpful.

  11. #11
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tbh, I find absolute paths can be a pita so I always use relative paths instead.

    You're using an absolute path in that url, so the actual path you are specifying is the path to your web root directory appended with your absolute path.

    Have a look at what your web root path actually is, then append the path in your "url" and see if the image exista at that "full" path. Otherwise consider using relative paths. If using relative paths, the path to a file (image or whatever) needs to be relative to the directory containing the file your css is in.

    Like I said, I find relative paths a lot less problematic - but that's just me

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,316
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    tbh, I find absolute paths can be a pita so I always use relative paths instead.
    Weird. tba, I find relative paths can be a pita so I always use absolute paths instead. You can set the path and not have to think about it again, no matter what page you are linking from. The only problem can be with PHP includes etc., where a url is not enough. For example, with includes you need something like

    Code:
    <?php include $_SERVER["DOCUMENT_ROOT"] . "/components/body_header.inc.php"; ?>
    Perhaps that's needed with require_once too, though PHP ain't my thing, so I don't know.

    But I suspect DD is working locally, in which case—as you say—the absolute URLs might not actually be pointing to the web root. I gues that's the other problem with absolute urls, but I don't work locally much, and when I do, I set up virtual hosts so that the web root locally is the same as remotely.

  13. #13
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by webdev1958 View Post
    tbh, I find absolute paths can be a pita so I always use relative paths instead.
    Quote Originally Posted by ralph.m View Post
    Weird. tba, I find relative paths can be a pita so I always use absolute paths instead.
    oh dear

    Yin and yang perhaps?

    For me it's just a personal choice - I just prefer, because I find things work much easier that way, to specify relative paths from the website's root folder, except for url's in the css file where they have to be relative to the folder the css file is in.



    I'm not sure what you mean by "locally". I do all my coding on a "local" web server (xampp) and so it is essentially the same as working on the www.

  14. #14
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It the H1 appearing on pages but not the bg image?
    Yes.


    If the H1 is appearing, then presumably the include is working.
    Bingo!


    There is nothing wrong with the CSS, so something else is amiss. As usual, a link would be helpful.
    Let me upload all of my files - which is a pain - and see if that helps.


    Debbie

  15. #15
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It the H1 appearing on pages but not the bg image? If the H1 is appearing, then presumably the include is working. There is nothing wrong with the CSS, so something else is amiss. As usual, a link would be helpful.
    Ralph, this is one time me posting my code won't help you...

    Why?

    Because the PITA image is a "background" image, and when I run my index.php this is the source I see...
    Code:
    <body>
      <div id="pageWrapper" class="clearfix">
        <div id="pageInner">
    			<!-- BODY HEADER -->
    						
    			<!-- PAGE HEADER -->
    			<div id="pageHeader">
    				<!-- Display Company Logo -->
    				<h1 id="homePage">
    					<span></span>Debbie's Company
    				</h1>
    Remember, the image appears as a background image when we style <span>...

    As far as Absolute vs Relative, I say it depends on where you are using things.

    From what I have learned, RELATIVE paths seem to work much better wuth things like HTML src.

    And ABSOLUTE paths seem to work better for PHP includes, especially when the include is being used by different files in different places for things like my Page Header.

    So you are both right.


    Debbie

  16. #16
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by DoubleDee View Post
    And ABSOLUTE paths seem to work better for PHP includes, especially when the include is being used by different files in different places for things like my Page Header.
    Again it boils down to personal preference because you can use either absolute or relative paths in includes and they both work equally well. Just use the type of path you are more comfortable with

    The last time I used an absolute path to specify the url in an include(), I think I was still in nappies.


  17. #17
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Forgetting to include a style sheet in article_index.php will getcha every time!!!
    Code:
    	<link type="text/css" rel="stylesheet" href="/css/components.css" />
    Debbie

  18. #18
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I believe the problem is with background: url(/images/debbie_160x45.png) no-repeat;
    ok, just humour me for a minute and try a relative path instead of your absolute path.

    I'm assuming the file structure you posted in post #1

    Code:
    background: url(../images/debbie_160x45.png) no-repeat;
    which is saying go up 1 level and then drill down into the images folder to the image file.

    If this works, then at least you will then know that your absolute path is specified incorrectly or there is something else going on.

    Edit:


    I didn't see your last post before I submitted this post - glad you sorted it out

  19. #19
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    ok, just humour me for a minute and try a relative path instead of your absolute path.

    I'm assuming the file structure you posted in post #1

    Code:
    background: url(../images/debbie_160x45.png) no-repeat;
    which is saying go up 1 level and then drill down into the images folder to the image file.

    If this works, then at least you will then know that your absolute path is specified incorrectly or there is something else going on.

    Edit:


    I didn't see your last post before I submitted this post - glad you sorted it out
    As far as I recall, relative versus absolute paths for things like this don't matter. (I prefer absolute.)

    As long as you don't change the directory structure, it shouldn't matter.

    PHP includes are a different beast, and having a "config" file with a reference to your Web Root is often really helpful, so there, absolute wins.


    Debbie

  20. #20
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    As far as I recall, relative versus absolute paths for things like this don't matter. (I prefer absolute.)
    That's right and is exactly what I said earlier - it boils down to personal preference.

    If you look at my previous post you will see the point of trying a relative path in this case, which would have worked if you had not forgotten to assign a stylesheet, was to test if the absolute path from your web root was correct or not.

    As it turns out, the relative path would not have worked either because YOU FORGOT TO ASSIGN A STYLESHEET


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
  •