Trouble with background image

(Not sure if this is an issue with my PHP or HTML?!)

What I am trying to do is the concept of "Image Replacement" by where you place an image over text so that Search Engines and Screen Readers can see your <h1> but sighted viewers just see your Company Logo.

The image is working 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 my Home Page I have this code to include my Page Header...

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

And in the other pages in my "pages" directory, the code changes slightly to...

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

In CSS, paths and URIs should be quoted.

Why not use the image's alt attribute. It's a required attribute according to the HTML4 spec.

Alternately, you can just disable the visibility/display of the <h1> tag.

In CSS, paths and URIs should be quoted.

According to the spec, quotes are optional.

doubledee, try looking at the page source and seeing what the URL actually is. This should be able to tell you why it's not working.

I've had a similar issue, and there's 2 simple fixes.

Either use a full URL to the image:

background: url('http://www.youdomain.com/images/debbie_160x45.png') no-repeat;

Or you can use a relative path:

background: url('../images/debbie_160x45.png') no-repeat;

The relative path is the path from the CSS file, in your case we have to go back a folder to get into the images folder.

Regards, PaulRyan.

In CSS, paths and URIs should be quoted.

 

Why not use the image's alt attribute. It's a required attribute according to the HTML4 spec.

 

Alternately, you can just disable the visibility/display of the <h1> tag.

Accessibility and Semantics and SEO.

See here...

http://css-tricks.com/630-css-image-replacement/

Debbie

I've had a similar issue, and there's 2 simple fixes.

 

Either use a full URL to the image:

background: url('http://www.youdomain.com/images/debbie_160x45.png') no-repeat;

 

Or you can use a relative path:

background: url('../images/debbie_160x45.png') no-repeat;

 

The relative path is the path from the CSS file, in your case we have to go back a folder to get into the images folder.

 

Regards, PaulRyan.

Take a look at my original post.

The problem is that both index.php and article_index.php include the Page Header, but they aren't in the same place.

For index.php I use...

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

And for article_index.php I use...

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

So I believe my includes are right.  (In fact, they must be, otherwise the rest of my Header wouldn't work?!)

Something is off with...

h1 span{
background: url('/images/debbie_160x45.png') no-repeat;
position: absolute;
width: 100%;
height: 100%;
}

Debbie

Using a full path would solve any issues, but nonetheless, do you have a URL I could visit to check a few things?

Regards, PaulRyan.

Using a full path would solve any issues, but nonetheless, do you have a URL I could visit to check a few things?

 

Regards, PaulRyan.

I have a test site, but would need to upload all of my files, since I am working locally.

But it won't do you any good, because 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>, so there isn't anything to see in "Page Source"...

Sincerely,

Debbie

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

The path to images in a CSS file should be relative to the CSS document itself (or absolute paths - either one is fine).