background: url() not working

[DoubleDee]

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...

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...

	<!-- BODY HEADER -->
	<?php	require_once('components/body_header.inc.php');	?>

Here is body_header.inc.php...

	<!-- PAGE HEADER -->
	<div id="pageHeader">

        <!-- Display Company Logo -->
				
		<h1 id="homePage">
			<span></span>Debbie's
		</h1>

And here is components.css...

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

[webdev1958]

try

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

[DoubleDee]

try

<?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...

		<!-- 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

[oddz]

Try adding display: block to the span style declaration.

[webdev1958]

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.

[oddz]

Yeah, most of the time a constant is defined that specifies the absolute path to the web root.

[DoubleDee]

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

[webdev1958]

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.

[DoubleDee]

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

[ralph.m]

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.

[webdev1958]

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

[ralph.m]

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

<?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.

[webdev1958]

Off Topic:

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.

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.

[DoubleDee]

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

[DoubleDee]

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...

<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

[webdev1958]

Off Topic:

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.

[DoubleDee]

Forgetting to include a style sheet in article_index.php will getcha every time!!!

	<link type="text/css" rel="stylesheet" href="/css/components.css" />

Debbie

[webdev1958]

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

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

[DoubleDee]

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

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

[webdev1958]

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