Hi guys, I have some strange issue with the "background-image" property, when I insert the "background-image" property into the tag, it displays normally like it should as you can see in the first picture I've attached, but when I put the "background-image" property into an CSS external file, it does not show the custom background image at all as in the last picture I've attached. You guys know why this is happening? the same thing happens when I try to use the @font-face property also. Any suggestions are highly appreciated.
<!doctype html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <title>basic.html</title> <style type = "text/css"> body { background-image: url("images/background.gif"); } </style> </head> <body> <div id= "all"> <div id = "header"> <h1>Heading level 1</h1> </div> <div id = "nav"> <span id = "home"><a href = " ">Home</a></span> <span id = "lessons"><a href = " ">Lessons</a></span> <span id = "questions"><a href = " ">Questions & Answers</a></span> <span id = "about"><a href = " ">About</a></span> <span id = "contact"><a href = " ">Contact Info</a></span> </div> <div id = "section"> </div> </div> </body> </html>
CSS external file:
body { background-image: url("images/background.gif"); background-repeat: repeat; } #header { background-color: yellow; text-align: center; } #nav { border: 1px solid black; width: 80%; background-color: lime; display: -webkit-box; -webkit-box-orient: horizontal; list-style-type: none; margin: auto; } span { display: block; -webkit-box-flex: 5; border-right: 1px solid black; text-align: center; } a { text-decoration: none; } #section { background-color: red; border: 1px solid black; height: 5em; width: 80%;; margin: auto; }
Attachment | Size |
---|---|
htmlsourcecode.png | 28.32 KB |
result.png | 34.76 KB |
externalcss.png | 21.97 KB |
layout.png | 7.5 KB |
Relative addresses?
Where is the css file located? Remember, those relative addys are relative to the file, html file in the first (working) case and the css file in the other.
If the css file is not in the same directory as the html file, its address for the bg image is wrong.
On a side note, please do not post your source, html, css or js, as an image. Simply change the extension to "txt" and attach the file itself. Too, it does little or no good to post the working version; we need to see the html file that doesn't work.
cheers,
gary
I created an example for
I created an example for you.
You indeed need to delete the inline-css code from your HTML in order to make everything work.
Check this JSfiddle where I re-created your lay-out.
Don't forget to add this code inside your head tags:
<link rel="stylesheet" type="text/css" href="mystyle.css">
(Remember that the href="mystule.css" is not going to work for you, you have to fill in your own path and the name of your css sheet).
Cheers, Henk
probably my explanation
probably my explanation wasn't clear enough. I put everything in the same folder(yes of course), what I meant was that, when I used the "background-image" property in an external CSS file, it didn't work, it didn't display the image AT ALL, but when I deleted the <link rel = "stylesheet" ......>
mechanism, and used <style type =......>
, and then "background-image" within that <style> tag, it displayed the image properly, I am really not sure why this is happening, the same thing happens to me too with the "@font-face" property.
//mod edit: Please wrap source code within [code][/code] bbcode tags. There is a button labeled "code" that will insert code tags. Fixed. ~gt
Then the only problem is that
Then the only problem is that you are probably linking to the wrong file.
I mean, if you have you css file inside a folder called css then it should be:
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
If you placed it a little further like css and then yourcssfile then you should make it like this:
<link rel="stylesheet" type="text/css" href="css/yourcssfile/mystyle.css">
Please check if the folders are correct, and if you created the link correctly.
Cause it should work, as I am showing you in the JSfiddle website.
More clarity required
probably my explanation wasn't clear enough. I put everything in the same folder(yes of course),
OK, not quite true, the image is in another directory, right? ./images/background.gif
what I meant was that, when I used the "background-image" property in an external CSS file, it didn't work, it didn't display the image AT ALL, but when I deleted the <link rel = "stylesheet" ......>
mechanism,
The full element being
<link rel="stylesheet" type="text/css" media="screen" href="externalcss.css"> <!-- or whatever the name -->
If what you have is not exactly as I showed, what is it?
and used <style type =......>
, and then "background-image" within that <style> tag, it displayed the image properly, I am really not sure why this is happening, the same thing happens to me too with the "@font-face" property.
That the same issue occurs with @font-face is an additional clue that, like the actual source codes, you have withheld.
So, where is the actual code?
gary
The first attachment is the
The first attachment is the folder containing all the files, the second attachment is the result when I run the codes. I am sorry for any confusion guys, and your helps are greatly appreciated.
Here is the HTML sources code.
<!doctype html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <title>basic.html</title> <link rel = "stylesheet" type = "text/css" href = "CSS/external.css"> </head> <body> <div id= "all"> <div id = "header"> <h1>Heading level 1</h1> </div> <div id = "nav"> <span id = "home"><a href = " ">Home</a></span> <span id = "lessons"><a href = " ">Lessons</a></span> <span id = "questions"><a href = " ">Questions & Answers</a></span> <span id = "about"><a href = " ">About</a></span> <span id = "contact"><a href = " ">Contact Info</a></span> </div> <div id = "section"> </div> </div> </body> </html>
-----------------------------------------------------------------------------------------
Here is the external CSS file
body { background-image: url("images/background.gif"); background-repeat: repeat; } @font-face { font-family: "Ardestine"; src: url("Fonts/ARDESTINE.ttf"); } #header { background-color: yellow; text-align: center; font-family: Ardestine, "sans serif"; } #nav { border: 1px solid black; width: 80%; background-color: lime; display: -webkit-box; -webkit-box-orient: horizontal; list-style-type: none; margin: auto; } span { display: block; -webkit-box-flex: 5; border-right: 1px solid black; text-align: center; } a { display: block; text-decoration: none; } #section { background-color: red; border: 1px solid black; height: 5em; width: 80%;; margin: auto; }
Attachment | Size |
---|---|
Directory.png | 41.79 KB |
result.png | 37.58 KB |
Here's the culprit
As I guessed. The css file is not in the same directory as the html file.
<link rel = "stylesheet" type = "text/css" href = "CSS/external.css">
The browser is seeking the bg image in /CSS/images/, which doesn't exist.
Edit the css file like so:
body { background-image: url("/images/background.gif"); background-repeat: repeat; } or body { background-image: url("../images/background.gif"); background-repeat: repeat; }
You have the identical issue with the @font-face address. Relative addresses are relative to the address of the file making the call.
cheers,
gary
gary.turner wrote: As I
As I guessed. The css file is not in the same directory as the html file.
<link rel = "stylesheet" type = "text/css" href = "CSS/external.css">
The browser is seeking the bg image in /CSS/images/, which doesn't exist.
Edit the css file like so:
body { background-image: url("/images/background.gif"); background-repeat: repeat; } or body { background-image: url("../images/background.gif"); background-repeat: repeat; }
You have the identical issue with the @font-face address. Relative addresses are relative to the address of the file making the call.
cheers,
gary
Man, Gary, that makes tons of sense, I had been mistakenly thinking that they just had to be in the same folder, then everything should be okay. Man, thank you so so much, I appreciate your help alot. God bless.
Nhuy