deltawiskey Posted September 12, 2011 Share Posted September 12, 2011 My directory tree looks like this - Public_html (Working directory) Images (contains all my .png files) css_Files (contains my css files)first_html_filesecond_html_file so I have one directory containing two sub-directories and my html files. The first_html_file calls a css file in css_Files Part of the css file reads - body{background-color: #cde6ff;background-image:url(public_html/Images/tbc_backdrop.png);background-repeat: repeat-x;padding-top: 0px;}Is the second line a valid reference, if not, what paths can the css file legally follow? This is the first time I've tried to use a reference inside a css file, and it doesn't seem to work - does the .png need to be somewhere else? Link to comment Share on other sites More sharing options...
Synook Posted September 12, 2011 Share Posted September 12, 2011 The path should be relative to the HTML file that includes the CSS script. Note that you are following the paths as the client sees it - so public_html will be the document root, /. So you could use background-image:url(/Images/tbc_backdrop.png); or background-image:url(Images/tbc_backdrop.png); (assuming you were using the CSS file in first_html_file or second_html_file). Link to comment Share on other sites More sharing options...
deltawiskey Posted September 12, 2011 Author Share Posted September 12, 2011 The path should be relative to the HTML file that includes the CSS script. Note that you are following the paths as the client sees it - so public_html will be the document root, /. So you could usebackground-image:url(/Images/tbc_backdrop.png); or background-image:url(Images/tbc_backdrop.png); (assuming you were using the CSS file in first_html_file or second_html_file). I'm going quietly nuts. This is all within my laptop. If I insert a line into the html file - <img src="images/tbc_backdrop.png"/> it is found and displayed. If I leave the line in the css file background-image:url(/images/tbc_backdrop.png); it is not found (tried it with and without the first forward slash, and with and without the preceding directory). The only way I can make it display via the css file is to put the png file in the same directory as the css file. Help? Please! Link to comment Share on other sites More sharing options...
dsonesuk Posted September 12, 2011 Share Posted September 12, 2011 That because page with img src is in the root, the css ref is referencing the image from within folder css_folder, it is at a different relative path, it should have background-image:url(../images/tbc_backdrop.png); ../ will take it to the root directory where it can locate the images folder. Link to comment Share on other sites More sharing options...
thescientist Posted September 12, 2011 Share Posted September 12, 2011 what they are trying to tell you is that the html file and the css file are in two different locations. 'Directions' to the image are relative because to get to the images folder is different if you are in the css folder or if you are in the root directory, where the html files are. It's just a matter of being familiar with how to traverse directory structures. Since images is a folder within the folder that the html file is in, you can just do images/filename.png. however, the CSS files is in folder, one level down removed from the root folder, so first you have to go up one from the css folder (../) and then into the image folder ../images/filename.png. Or you can just always reference the webroot through the use of /. Link to comment Share on other sites More sharing options...
deltawiskey Posted September 13, 2011 Author Share Posted September 13, 2011 what they are trying to tell you is that the html file and the css file are in two different locations. 'Directions' to the image are relative because to get to the images folder is different if you are in the css folder or if you are in the root directory, where the html files are. It's just a matter of being familiar with how to traverse directory structures. Since images is a folder within the folder that the html file is in, you can just do images/filename.png. however, the CSS files is in folder, one level down removed from the root folder, so first you have to go up one from the css folder (../) and then into the image folder ../images/filename.png. Or you can just always reference the webroot through the use of /. Many thanks, finally got it. I have to say I'm impressed by how helpful you guys are to a beginner. The result is visible here - http://www.deltawiskey.com/0_DWG_BestBH3.html The top section is the .png with h1 centred inside it, just what I wanted. However similar question - why can't it find the favicon when I use my personal access to the host (cPanelx11)? I have a second access to cPanel so that I can work on the bridge club website, one of my pages there picks up the favicon perfectly - http://www.titchfieldbc.hampshire.org.uk/0_DWG_ResultsFinal1.html I've used identical code in both, in fact copied and pasted from the working page - <link rel="shortcut icon" href="images/favicon.ico" />,and I've been careful to use the same directory structure. But no favicon! I even downloaded it from the club host and uploaded to mine, just to be sure they were identical. Any ideas,please? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 13, 2011 Share Posted September 13, 2011 is the favicon.ico image in the images folder in both sites, if you enter http://www.deltawiskey.com/images/favicon.ico the image is displayed, but if you use http://www.deltawiskey.com/images/favicon.ico it is not displayed? Hang on! just checked link to both sites, one folder is 'images' the other is 'Images', you have to match exactly the case and name of folder, files, images etc, or the link will fail. Link to comment Share on other sites More sharing options...
deltawiskey Posted September 13, 2011 Author Share Posted September 13, 2011 Ah, you spotted that - let me explain. The club site was set up my someone who tried hard, but didn't know much about computers, or anything about file organisation. I've only just persuaded him that file names like '2011July12' will group together reasonably well , rather than just '12July' (no year, note) which is the style he was using. I'd use a filename like '20110712_MondayResults' similar to what I do with family photographs, but I can only steer him gently. He's a far better bridge player than me! He has also managed to have a file called 'images' with one file inside it, and another called 'Images' with everything else. So on the club site I've put the favicon in 'Images,' as you noticed. On my personal site (same host), there is only one all lower case 'images' file, all pictures and the favicon are in there. I've tried what you suggest, like below, but still no joy - <link rel="shortcut icon" href="http://www.deltawiskey.com/images/favicon.ico" /> That's copied and pasted from my file, so if you see anything wrong, please let me know. I've spent most of today trying various things recommended by various sites, nothing has worked. I've checked and double checked, the directory structure and file locations on both sites are identical, but only the (wrong) one works. Thanks for your interest, somehow we'll get there! Link to comment Share on other sites More sharing options...
deltawiskey Posted September 13, 2011 Author Share Posted September 13, 2011 Even the method given here doesn't work! http://www.w3.org/2005/10/howto-favicon Link to comment Share on other sites More sharing options...
dsonesuk Posted September 13, 2011 Share Posted September 13, 2011 No, No sorry i meant enter "http://www.deltawisk...ges/favicon.ico" (although it should work as well) in the address bar in your browser, as you would a website address. If it shows the favicon in browser its definitely the right address. Another issue you might not know of, is that IE takes a while to show the new favicon, while other browsers show it straight away. So even though you don't see it if using IE, if you use the actual address as i have demonstrated you will know its a IE issue. Or just check it through one of the other browsers. If it does show in browser, another suggestion is to add type="image/x-icon" <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" /> I'm sure this was mentioned before in a previous topic many months ago. Link to comment Share on other sites More sharing options...
deltawiskey Posted September 14, 2011 Author Share Posted September 14, 2011 You've cracked it, I owe you several beers. Site address is here - http://www.deltawiskey.com/index.html And this is the link I used, which I think is what you meant - <link rel="shortcut icon" href="http://www.deltawiskey.com/images/favicon.ico" type="image/x-icon" /> It works in Firefox (my usual browser), IE9, Safari, and Chrome - slight hiccup on Chrome, it only appears in the tab, not the address bar, but let's not worry about that. And I should have said at the start, Windows 7, 64 bit. Oh, damn, I haven't tested in 32-bit IE. Will do shortly. Can I just add, for the benefit of anyone else who chances across this, that the method Microsoft recommend didn't work for me. They say save as a bitmap, then just change the extension from .bmp to .ico. Might be OK in FF, but not IE. I used this site to convert a jpg to ico - http://www.prodraw.net/favicon/index.php Thanks again, I can't believe how many hours I've spent on this! Link to comment Share on other sites More sharing options...
dsonesuk Posted September 14, 2011 Share Posted September 14, 2011 usually its done <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" /> OR <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" /> That way, if you test it on a different domain, or local web server address it will use that image relative to its location instead. Same with image,etc file location, that way you will know it will work wherever you upload and place all you folders and files on the web server. Link to comment Share on other sites More sharing options...
deltawiskey Posted September 14, 2011 Author Share Posted September 14, 2011 That's it, the second one works - the forward slash before 'images' made a difference. Persistence is everything! Thanks again! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.