doubledee Posted December 3, 2011 Share Posted December 3, 2011 (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 Link to comment https://forums.phpfreaks.com/topic/252408-trouble-with-background-image/ Share on other sites More sharing options...
xyph Posted December 3, 2011 Share Posted December 3, 2011 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. Link to comment https://forums.phpfreaks.com/topic/252408-trouble-with-background-image/#findComment-1294111 Share on other sites More sharing options...
scootstah Posted December 4, 2011 Share Posted December 4, 2011 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. Link to comment https://forums.phpfreaks.com/topic/252408-trouble-with-background-image/#findComment-1294140 Share on other sites More sharing options...
PaulRyan Posted December 4, 2011 Share Posted December 4, 2011 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. Link to comment https://forums.phpfreaks.com/topic/252408-trouble-with-background-image/#findComment-1294146 Share on other sites More sharing options...
doubledee Posted December 4, 2011 Author Share Posted December 4, 2011 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 Link to comment https://forums.phpfreaks.com/topic/252408-trouble-with-background-image/#findComment-1294156 Share on other sites More sharing options...
doubledee Posted December 4, 2011 Author Share Posted December 4, 2011 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 Link to comment https://forums.phpfreaks.com/topic/252408-trouble-with-background-image/#findComment-1294160 Share on other sites More sharing options...
PaulRyan Posted December 4, 2011 Share Posted December 4, 2011 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. Link to comment https://forums.phpfreaks.com/topic/252408-trouble-with-background-image/#findComment-1294163 Share on other sites More sharing options...
doubledee Posted December 4, 2011 Author Share Posted December 4, 2011 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 Link to comment https://forums.phpfreaks.com/topic/252408-trouble-with-background-image/#findComment-1294166 Share on other sites More sharing options...
doubledee Posted December 4, 2011 Author Share Posted December 4, 2011 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 Link to comment https://forums.phpfreaks.com/topic/252408-trouble-with-background-image/#findComment-1294170 Share on other sites More sharing options...
haku Posted December 6, 2011 Share Posted December 6, 2011 The path to images in a CSS file should be relative to the CSS document itself (or absolute paths - either one is fine). Link to comment https://forums.phpfreaks.com/topic/252408-trouble-with-background-image/#findComment-1294797 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.